Sonoma County Office of Education

Sample Accordion


This is sample text in the body of the panelA.

Add additional panels by copying the entire #panelA block and pasting it after #panelB then update all references to panelA, headingA and collapseA to panelC, headingC, and collapseC. Continue alphabetically for additional panels. Panels are alternately colored in the CSS.

To start with this panel closed, remove the class "in" from the #collapseA div:
<div id="collapseA" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingA">
and add the class "collapsed" to the "a" tag:
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#accordionTop" href="#collapseA" aria-expanded="true" aria-controls="collapseA" >

This is sample text in the body of the panelB