Unlimited Websites Cpanel Hosting Only $0.99 per month - Click here

Accordion

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

Usage

Default Accordion of Butter Cake

To remove default styling of an .accordion , simply remove the class .default from .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 .active class to .accordion

We hope you have enjoyed using Butter Cake and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.

Patreon