Accordions

Basic accordion

Demo

First Title

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia.

Second Title

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Third Title - Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Fourth Title - Integer posuere erat a ante venenatis dapibus

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>

<div class="cui accordion">
    <!-- The accordion title can be any heading element as long as it has
    the class `title-bar` -->
    <h3 class="title-bar">{{ Accordion title }}</h3>
    <!-- The accordion content can be anything. -->
    {{ Accordion content }}

    <!-- Repeat as necessary -->
    <h3 class="title-bar">{{ Accordion title }}</h3>
    {{ Accordion content }}
</div>

Single accordion

Demo

Dark variant

Aliquam tincidunt velit sit amet

Light variant

Aliquam tincidunt velit sit amet

Code


<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>

<!-- Default background is the dark gray -->
<!-- Add the class accordion-single-light will update the background to the light grey -->

<div class="cui accordion accordion-single {{ accordion-single-light }} mb-lg">
    <!-- The accordion title can be any heading element as long as it has
    the class `title-bar` -->
    <h3 class="title-bar">{{ Accordion title }}</h3>
    <!-- The accordion content can be anything. -->
    {{ Accordion content }}
</div>

Information This site is moving

Note

Accordions

Basic accordion

Demo

First Title

Second Title

Third Title - Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Fourth Title - Integer posuere erat a ante venenatis dapibus

Code

Single accordion

Demo

Dark variant

Aliquam tincidunt velit sit amet

Light variant

Aliquam tincidunt velit sit amet

Code