Fork me on GitHub

Accordions

Required files

SCSS files required: _components.accordion.scss

SCSS files optional: _components.circle-icons.scss and _components.plus-minus-toggle.scss

JS files required: accordion.js

Accordion structure

An accordion is created with an element with a class .accordion and the accordion js module data-js-module="accordion"

An accordion item title has the class .accordion__toggle

An accordion item content has the class .accordion__content plus another element inside with the class .accordion__inner (due to the padding of the slide mechanism)

<dl data-js-module="accordion" class="accordion">
    <dt class="accordion__toggle">
        [ACCORDION ITEM 1 TITLE]
    </dt>
    <dd class="accordion__content">
        <div class="accordion__inner">
            [ACCORDION ITEM 1 CONTENT]
        </div>
    </dd>
    <dt class="accordion__toggle">
        [ACCORDION ITEM 2 TITLE]
    </dt>
    <dd class="accordion__content">
        <div class="accordion__inner">
            [ACCORDION ITEM 2 CONTENT]
        </div>
    </dd>
</dl>
Sed placerat, enim nec tincidunt convallis, metus est finibus nisi, eu cursus massa enim in leo
Quisque eget leo ullamcorper, dictum massa non, faucibus est. Morbi erat odio, tempor id egestas eget, porttitor sodales ipsum. Etiam et dapibus tortor.
Donec et sollicitudin tellus, ut blandit tortor
Duis vel laoreet ligula. Duis ac orci blandit sem consequat dictum eget eu diam. Nunc mattis, leo sit amet pulvinar posuere, arcu nisi finibus augue, porttitor gravida lectus nunc tincidunt purus.

Accordion vertical spacing

There are vertical space variations available with the following modifying classes accordion--v-spacing-xs, accordion--v-spacing-sm, accordion--v-spacing-lg, accordion--v-spacing-xl

There is also a mixin available here

Note: these classes don't affect the font size, some of the below examples have the global helper classes .font-size-sm and .font-size-lg

Accordion extra small = .accordion--v-spacing-xs

Sed placerat, enim nec tincidunt convallis, metus est finibus nisi, eu cursus massa enim in leo
Quisque eget leo ullamcorper, dictum massa non, faucibus est. Morbi erat odio, tempor id egestas eget, porttitor sodales ipsum. Etiam et dapibus tortor.
Donec et sollicitudin tellus, ut blandit tortor
Duis vel laoreet ligula. Duis ac orci blandit sem consequat dictum eget eu diam. Nunc mattis, leo sit amet pulvinar posuere, arcu nisi finibus augue, porttitor gravida lectus nunc tincidunt purus.

Accordion small = .accordion--v-spacing-sm

Sed placerat, enim nec tincidunt convallis, metus est finibus nisi, eu cursus massa enim in leo
Quisque eget leo ullamcorper, dictum massa non, faucibus est. Morbi erat odio, tempor id egestas eget, porttitor sodales ipsum. Etiam et dapibus tortor.
Donec et sollicitudin tellus, ut blandit tortor
Duis vel laoreet ligula. Duis ac orci blandit sem consequat dictum eget eu diam. Nunc mattis, leo sit amet pulvinar posuere, arcu nisi finibus augue, porttitor gravida lectus nunc tincidunt purus.

Accordion large = .accordion--v-spacing-lg

Sed placerat, enim nec tincidunt convallis, metus est finibus nisi, eu cursus massa enim in leo
Quisque eget leo ullamcorper, dictum massa non, faucibus est. Morbi erat odio, tempor id egestas eget, porttitor sodales ipsum. Etiam et dapibus tortor.
Donec et sollicitudin tellus, ut blandit tortor
Duis vel laoreet ligula. Duis ac orci blandit sem consequat dictum eget eu diam. Nunc mattis, leo sit amet pulvinar posuere, arcu nisi finibus augue, porttitor gravida lectus nunc tincidunt purus.

Accordion extra large = .accordion--v-spacing-xl

Sed placerat, enim nec tincidunt convallis, metus est finibus nisi, eu cursus massa enim in leo
Quisque eget leo ullamcorper, dictum massa non, faucibus est. Morbi erat odio, tempor id egestas eget, porttitor sodales ipsum. Etiam et dapibus tortor.
Donec et sollicitudin tellus, ut blandit tortor
Duis vel laoreet ligula. Duis ac orci blandit sem consequat dictum eget eu diam. Nunc mattis, leo sit amet pulvinar posuere, arcu nisi finibus augue, porttitor gravida lectus nunc tincidunt purus.