Bootsfaces - Accordion: Change arrows to glyphicons and add Subtitle

Question

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

How could I change the arrows here to glyphicons?

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

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...

Answer 1

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:

• Points in CSS specificity
• How do I override default PrimeFaces CSS with custom styles? (although it's targeting PrimeFaces, the same principals apply here).

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.