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!!

Support Butter Cake 😃

Monthly donation

Patreon

One Time donation

Page Content