Basic example
Click the accordions below to expand/collapse the accordion content.
Accordion Header 1
This is the first item's accordion body. It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It's also worth noting that just about
any HTML can go within the
.G_Accordion_Body-content, though the
transition does limit overflow.
Accordion Header 2
This is the second item's accordion body. It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It's also worth noting that just about
any HTML can go within the
.G_Accordion_Body-content, though the
transition does limit overflow.
Accordion Header 3
This is the third item's accordion body. It is hidden by
default, until the collapse plugin adds the appropriate classes that we use to
style each element. These classes control the overall appearance, as well as the
showing and hiding via CSS transitions. You can modify any of this with custom
CSS or overriding our default variables. It's also worth noting that just about
any HTML can go within the
.G_Accordion_Body-content, though the
transition does limit overflow.
<div class="G_Accordion">
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 1
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 1
</div>
</div>
</div>
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 2
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 2
</div>
</div>
</div>
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 3
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 3
</div>
</div>
</div>
</div>
Open Multiple Items
just add accordion-multiple="true" attribute to parent element with
.G_Accordion class to enable multiple accordion to open at a time .
Accordion Header 1
Accordion Body 1
Accordion Header 2
Accordion Body 2
Accordion Header 3
Accordion Body 3
<div class="G_Accordion" accordion-multiple="true">
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 1
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 1
</div>
</div>
</div>
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 2
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 2
</div>
</div>
</div>
<div class="G_Accordion_Item">
<div class="G_Accordion_Header">
Accordion Header 3
</div>
<div class="G_Accordion_Body">
<div class="G_Accordion_Body-content">
Accordion Body 3
</div>
</div>
</div>
</div>