cssjsfbootsfaces

Bootsfaces - Accordion: Change arrows to glyphicons and add Subtitle

A normal Bootstrap Accordion would look like this:

Code:

<b:accordion>
  <b:panel id="panel1" title="Item 1">Content 1</b:panel>
  <b:panel id="panel2" title="Item 2">Content 2</b:panel>
  <b:panel id="panel3" title="Item 3">Content 3</b:panel>
</b:accordion>

Picture

Accordion

How could I change the arrows here to glyphicons?

Also, I am trying to change have a subtitle added to the title like this: Title with subtitle in accordion

Which works fine in html as i can just add it to the <div class="panel-heading"> but i have no Idea how I could manage this with bootsfaces...

Solution

  • Icon

    See my comment for the first part of your question. The icon already is a Glyph icon:

    .panel-heading a.panel-title-link:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    color: grey;
}

    If you want to change the icon, you need to override the CSS rule with a more specific one. For example:

    body .panel-heading a.panel-title-link:after {
    content: "\e114"; // Change the icon here
}

    Prefixing the rule with body will make it more specific.

    See also:

    Header

    The header is demonstrated in the showcase: https://showcase.bootsfaces.net/layout/Accordion.jsf

    However, the JSF markup they show is incorrect. It actually is:

    <b:panel id="panel3">Content 3
  <f:facet name="heading">
    <h:outputText value="Panel heading with a facet in place of a title " />
    <b:badge style="margin-left:10px" value="since version 0.4" />
  </f:facet>
  <f:facet name="footer">
    Footer of panel 3
  </f:facet>
<b:panel>

    See: https://github.com/TheCoder4eu/BootsFacesWeb/blob/master/src/main/webapp/layout/Accordion.xhtml

    You could use headings there, but you run into the issue it will be wrapped into an anchor attribute, which will result in invalid HTML. Also the position of the icon will be wrong. If you want a proper solution, try submitting a feature request, or, if you can, create it and submit a pull request.