Accordions

Available accordion variations.

Get Started

1

Simple Accordion

Basic example

Accordions let you display more data in a compact and axpandable layout. Only one section can be opened at a time. Check out the code to learn more about structure. Simple accordion is controled with javascript.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

SHOW CODE 

<div class="simple-accordion-wrapper">
    <div class="accordion-section">
        <a href="javascript:void(0)">
            Section 1
            <i class="fa fa-plus"></i>
        </a>
        <div class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.</p>
        </div>
    </div>
    <div class="accordion-section">
        <a href="javascript:void(0)">
            Section 2
            <i class="fa fa-plus"></i>
        </a>
        <div class="accordion-content">
            <p> Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.</p>
        </div>
    </div>
    <div class="accordion-section">
        <a href="javascript:void(0)">
            Section 3
            <i class="fa fa-plus"></i>
        </a>
        <div class="accordion-content">
            <p>Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.</p>
        </div>
    </div>
    <div class="accordion-section">
        <a href="javascript:void(0)">
            Section 4
            <i class="fa fa-plus"></i>
        </a>
        <div class="accordion-content">
            <p> Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.</p>
        </div>
    </div>
</div>

Accordion colors

Active sections can have different colors. Available color classes are .is-primary, .is-secondary, .is-accent, .is-success and .is-info. The color class has to be added to the .simple-accordion-wrapper parent element.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 2

Aliquam cursus vitae nulla non rhoncus. Nunc condimentum erat nec dictum tempus. Suspendisse aliquam erat hendrerit vehicula vestibulum. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 3

Pellentesque aliquam ligula libero, vitae imperdiet diam porta vitae. sed do eiusmod tempor incididunt ut labore et dolore magna. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

Section 4

Donec tincidunt consectetur orci at dignissim. Proin auctor aliquam justo, vitae luctus odio pretium scelerisque. Ea eum aliquip praesent, timeam referrentur vel cu, pri sint dissentiet ut.molestie.

2

Multi toggle

Multiple toggles

If you want to create a toggle list in wich multiple elements can be opened at the same time, you can use multi toggles. Multi toggles dont need any javascript. Check the code example for more details.

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

SHOW CODE 

<div class="multi-toggle-wrapper">
    <div class="mt-item">
        <input id="mt-item-1" class="mt-item-input" type="checkbox" name="mt1">
        <label for="mt-item-1" class="mt-item-label"><span>Section 1</span></label>
        <div class="mt-item-content">
            <p>Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
        </div>
    </div>
    <div class="mt-item">
        <input id="mt-item-2" class="mt-item-input" type="checkbox" name="mt2">
        <label for="mt-item-2" class="mt-item-label"><span>Section 2</span></label>
        <div class="mt-item-content">
            <p>Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
        </div>
    </div>
    <div class="mt-item">
        <input id="mt-item-3" class="mt-item-input" type="checkbox" name="mt3">
        <label for="mt-item-3" class="mt-item-label"><span>Section 3</span></label>
        <div class="mt-item-content">
            <p>Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
        </div>
    </div>
    <div class="mt-item">
        <input id="mt-item-4" class="mt-item-input" type="checkbox" name="mt4">
        <label for="mt-item-4" class="mt-item-label"><span>Section 4</span></label>
        <div class="mt-item-content">
            <p>Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
        </div>
    </div>
    <div class="mt-item">
        <input id="mt-item-5" class="mt-item-input" type="checkbox" name="mt5">
        <label for="mt-item-5" class="mt-item-label"><span>Section 5</span></label>
        <div class="mt-item-content">
            <p>Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
        </div>
    </div>
</div>
3

Single toggle

Basic example

Single toggle lets you save space and hide content chunks. Single toggle is controled with javascript.

TOGGLE SECTION

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Errem latine pro id, sea ei dolor legendos constituam. Ut pri decore persius concludaturque, et magna omittam vituperatoribus per. Et cetero eripuit his. Eum rebum moderatius appellantur ea.

SHOW CODE 

<div class="single-toggle-wrapper">
    <div class="toggle-wrap">
        <span class="trigger"><a href="#">TOGGLE SECTION<i class="im im-icon-Add"></i></a></span>
        <div class="toggle-container">
            <p class="no-padding mt-10">Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.</p>
            <p class="no-padding mt-10">Errem latine pro id, sea ei dolor legendos constituam. Ut pri decore persius concludaturque, et magna omittam vituperatoribus per. Et cetero eripuit his. Eum rebum moderatius appellantur ea.</p>
        </div>
    </div>
</div>

With tabs inside

Single toggles can contain any type of content, with the appropriate styles. This is an example with navigation tabs.

TOGGLE SECTION WITH TABS

Lorem ipsum dolor sit amet, cu ius oratio appareat partiendo. Solet civibus nam te. Eu vel veri putent. Et suas reprimique adversarium duo, ex vel ridens graecis. Mel ipsum oratio voluptatum et.

Errem latine pro id, sea ei dolor legendos constituam. Ut pri decore persius concludaturque, et magna omittam vituperatoribus per. Et cetero eripuit his. Eum rebum moderatius appellantur ea. Vel ex porro definiebas neglegentur.

At sale causae scribentur ius, pri ea mollis laboramus. Soluta antiopam ad mea, in maiorum accusamus eam. At mea tantas audiam deterruisset, probo etiam efficiendi qui te. Similique cotidieque at vim, sonet dignissim pertinacia his ea. Pro te harum officiis pericula.