2. 3.x Component Gallery
  3. Accordions

Accordions

v3.x

Accordions chunk, conceal and reveal content effectively.

BBootstrap 3.x | Accordions

 Select Icon



Lorem ipsum dolor sic amet!
Lorem ipsum dolor sic amet!
Lorem ipsum dolor sic amet!
<div class="panel-group" id="accordion7401210" role="tablist" aria-multiselectable="false">
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading8122873">
         <h5 class="panel-title">
            <a role="button" data-toggle="collapse" class="accordion-plus-toggle collapsed" data-parent="#accordion7401210" href="#collapse8122873" aria-expanded="false" aria-controls="collapse8122873">Panel 1</a>
         </h5>
      </div>
      <div id="collapse8122873" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading8122873">
         <div class="panel-body">Lorem ipsum dolor sic amet!</div>
      </div>
   </div>
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading411391">
         <h5 class="panel-title">
            <a role="button" data-toggle="collapse" class="accordion-plus-toggle collapsed" data-parent="#accordion7401210" href="#collapse411391" aria-expanded="false" aria-controls="collapse411391">Panel 2</a>
         </h5>
      </div>
      <div id="collapse411391" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading411391">
         <div class="panel-body">Lorem ipsum dolor sic amet!</div>
      </div>
   </div>
   <div class="panel panel-default">
      <div class="panel-heading" role="tab" id="heading2183316">
         <h5 class="panel-title">
            <a role="button" data-toggle="collapse" class="accordion-plus-toggle collapsed" data-parent="#accordion7401210" href="#collapse2183316" aria-expanded="false" aria-controls="collapse2183316">Panel 3</a>
         </h5>
      </div>
      <div id="collapse2183316" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2183316">
         <div class="panel-body">Lorem ipsum dolor sic amet!</div>
      </div>
   </div>
</div>

Custom CSS

Custom CSS (and Font Awesome 4) is required for the light blue plus symbols on the panels.

View all custom Bootstrapr.io CSS 
/* plus glyph for showing collapsible panels */
.panel-heading .accordion-plus-toggle:before {
   font-family: FontAwesome;
   content: "\f068";
   float: right;
   color: silver;
}

.panel-heading .accordion-plus-toggle.collapsed:before {
   content: "\f067";
   color: silver;
}

/* arrow glyph for showing collapsible panels */
.panel-heading .accordion-arrow-toggle:before {
   font-family: FontAwesome;
   content: "\f078";
   float: right;
   color: silver;
}

.panel-heading .accordion-arrow-toggle.collapsed:before {
   content: "\f054";
   color: silver;
}

/* sets the link to the width of the entire panel title */
.panel-title > a {
   display: block;
}

Notes