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
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloremque, vitae.
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!!