Accordion
Butter Cake Provides an easiest way to create accordions with less HTML.
NOTE: Do not add any padding or margin to.panelbut can customize.panel-box
Usage
Default Accordion of Butter Cake
To remove default styling of an.accordion, simply remove the class.defaultfrom.accordion-container
accordion 1 - active
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
accordion 2
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
accordion 3
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
<!-- single accordion - Active -->
<div class="accordion-container default">
<div class="accordion active">
accordion 1 - active
</div>
<div class="panel">
<div class="panel-box">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
</p>
</div>
</div>
</div>
<!-- single accordion -->
<div class="accordion-container default">
<div class="accordion">
accordion 2
</div>
<div class="panel">
<div class="panel-box">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
</p>
</div>
</div>
</div>
<!-- single accordion -->
<div class="accordion-container default">
<div class="accordion">
accordion 3
</div>
<div class="panel">
<div class="panel-box">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
</p>
</div>
</div>
</div>
To keep an accordion open by default add.activeclass to.accordion
Contact us
Report Bug
Request Feature
Submit Work