Sonoma County Office of Education

Sample Accordion

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

Leilan, Student
"I like Amarosa because there's a much smaller student count and so teachers can be one-on-one with you. They can actually help you and be one-on-one with you while the class is doing something else. I feel like that's a huge game-changer." - Leilan, Student