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

Nicole Rosaschi, SCOE Administrative Operations Specialist, Human Resources
"I love that the people I work with are passionate about their work, passionate about our students getting the best possible education, and passionate about Sonoma County. " - Nicole Rosaschi, SCOE Administrative Operations Specialist, Human Resources