accordions
Butter Cake Provides an easiest way to create accordions with less HTML.
NOTE: Do not add any padding or margin to .panel but can customize
.panel-box
To remove default styling of an.accordion, simply remove the class.default
from.accordion-container
Example
Default Accordion of Butter Cake
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.
Snippet
To keep an accordion open by default add .active class to
.accordion
<!-- single accordion - Active -->
<div class="accordion-container default">
<!-- title -->
<div class="accordion active">accordion 1</div>
<!-- content -->
<div class="panel">
<div class="panel-box">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>Custom
Custom accordion using only Butter Cake css Framework, without writing any css.
accordion 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo impedit sed eum veniam quibusdam non.
accordion 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur perferendis obcaecati a dolores non nulla ullam accusamus modi dolore unde.
accordion 3
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae minus, iusto qui maxime error voluptatibus numquam quibusdam dolorum eum, quisquam accusamus debitis doloremque id placeat?
Snippet for Custom accordion
<!-- single accordion - Active -->
<div class="accordion-container mb-1">
<h4 class="accordion active p-2 bg-primary text-white flex fj-between mb-0">accordion 1 <i
class="fa fa-info-circle"></i></h4>
<div class="panel">
<div class="panel-box p-2">
<p class="mb-0">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<!-- single accordion -->
<div class="accordion-container mb-1">
<h4 class="accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 2 <i class="fa fa-info-circle"></i>
</h4>
<div class="panel">
<div class="panel-box p-2">
<p class="mb-0">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<!-- single accordion -->
<div class="accordion-container mb-1">
<h4 class="accordion p-2 bg-primary text-white flex fj-between mb-0">accordion 3 <i class="fa fa-info-circle"></i>
</h4>
<div class="panel">
<div class="panel-box p-2">
<p class="mb-0">Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>Feel free to Report any typo, any bug or request new Feature, you are always Welcome!!