c-accordion

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code 
<section class="c-accordion js-accordion" id="accordion-1">
    <a href="#accordion-1" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion is-active

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code 
<section class="c-accordion js-accordion is-active" id="accordion-2">
    <a href="#accordion-2" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion c-accordion--no-arrow

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code 
<section class="c-accordion c-accordion--no-arrow js-accordion" id="accordion-3">
    <a href="#accordion-3" class="c-accordion__button js-accordion__toggle e-button e-button--simple">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>

c-accordion c-accordion@lteLine

Maiores lorem

Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.

Code 
<section class="c-accordion c-accordion@lteLine js-accordion" id="accordion-4">
    <a href="#accordion-4" class="c-accordion__button js-accordion__toggle u-bold">Maiores lorem</a>
    <div class="c-accordion__content js-accordion__content">
        <p>Temporibus pariatur voluptates numquam aliquam asperiores. Est qui minus nostrum sequi itaque, quia vero, expedita temporibus dolorem, magni sapiente. Saepe dolore quibusdam labore dolores aperiam architecto accusantium ducimus cupiditate aliquam.</p>
    </div>
</section>