Accordion

Default Style

A standard accordion structure looks like this:

.title - accordion header
.content - accordion content
.accordion-trigger - accordion trigger, which can be inside or outside the accordion.

Accordion Header 01

Content 01 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien

Accordion Header 02

Content 02 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien

Accordion Header 03

Content 03 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus magna vel ex semper, in pharetra justo pulvinar. Donec non quam vitae justo mattis vestibulum a nec nisi. Morbi mi felis, ultrices vitae risus consectetur, porta ultrices sapien


<div class="ui accordion">
    <div class="title accordion-trigger">
        Accordion Header 01
    </div>
    <div class="content">
        ...
    </div>
    <div class="title accordion-trigger">
        Accordion Header 02
    </div>
    <div class="content">
        ...
    </div>
    ...
</div>

Styled

A styled accordion adds basic formatting

Accordion Header 01

Accordion Header 02

Accordion Header 03


<div class="ui accordion styled">
    ...
</div>

Width Option

An accordion can take up the width of its container applying the .fluid class.

Accordion Header 01

Accordion Header 02

Accordion Header 03


<div class="ui accordion styled fluid">
    ...
</div>

Icon Option

You can use .icon.dropdown inside the accordion title to achieve something like this:

Accordion Header 01

Accordion Header 02

Accordion Header 03


<div class="ui accordion">
    <div class="title accordion-trigger">
        <i class="dropdown icon"></i>
        Accordion Header 01
    </div>
    <div class="content">
        ...
    </div>
    ...
</div>