accordions

Butter Cake Provides an easiest way to create accordions without writing too many lines of code.

NOTE: Do not add any padding or margin to .panel but can customize .panel-box

To remove default styling of anaccordion, simply remove the class .default
from .accordion-container

Example



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. Ea ut nihil cumque corrupti laborum nemo, et perferendis quibusdam similique, iste fuga. Dicta labore perspiciatis atque nam quas voluptates laudantium excepturi qui commodi sint autem tenetur provident fugiat accusamus sit, ea quasi necessitatibus, dolore eaque distinctio earum harum praesentium

explicabo dolorem! Incidunt magni distinctio dolor consectetur velit rem accusantium ipsum quasi numquam voluptatum. Amet totam, ad corporis reprehenderit deserunt recusandae repellat nihil enim voluptatibus officiis porro ullam consectetur quasi sit iure quos praesentium impedit cupiditate doloremque quisquam veritatis alias minima? Veritatis at quis magnam? Fugiat assumenda ex similique reiciendis sunt ut.

Link
accordion 3

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam minus ratione officiis alias, soluta ducimus?

Code

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 consectetur adipisicing elit. Quae laboriosam rerum recusandae, molestiae error alias?</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 bg-secondary">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo impedit sed eum veniam quibusdam non.</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 bg-secondary">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur perferendis obcaecati a dolores non
                nulla ullam accusamus modi dolore unde.</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 bg-secondary">
            <p>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?</p>
        </div>
    </div>
</div>

Snippet

accordion Snippet to start with.

<!-- SINGLE accordion - Active -->
<div class="accordion-container default">
    <div class="accordion active">accordion 1</div>

    <div class="panel">
        <div class="panel-box">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolorum optio suscipit delectus, aspernatur veniam.</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. Earum tempora molestias expedita blanditiis veritatis maxime illum! Tenetur ipsum blanditiis fugit?</p>

            <a class="btn-primary" href="#!">Link</a>
        </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. Praesentium architecto quaerat enim fugit quae nemo!</p>
        </div>
    </div>
</div>