Accordions

v-0.0.0

• Element one
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare. Cras orci ante, interdum id risus eget, lobortis congue lectus. In hac habitasse platea dictumst.
• Element two
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare. Cras orci ante, interdum id risus eget, lobortis congue lectus. In hac habitasse platea dictumst.

<ul class="accordion">
    <li class="accordion__item">
        <input class="accordion__item__input"
            type="checkbox"
            name="acc2_elm"
            id="acc2_elm1" />
        <label class="accordion__item__label"
            for="acc2_elm1">
            Element one
        </label>
        <div class="accordion__item__collapsable">
            <div class="accordion__item__collapsable__wrapper">
                <div class="accordion__item__collapsable__content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nam ut erat nec lacus iaculis ornare. Cras orci ante,
                    interdum id risus eget, lobortis congue lectus.
                    In hac habitasse platea dictumst.
                </div>
            </div>
        </div>
    </li>
    <li class="accordion__item">
        <input class="accordion__item__input"
            type="checkbox"
            name="acc2_elm"
            id="acc2_elm2" />
        <label class="accordion__item__label"
            for="acc2_elm2">
            Element two
        </label>
        <div class="accordion__item__collapsable">
            <div class="accordion__item__collapsable__wrapper">
                <div class="accordion__item__collapsable__content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Nam ut erat nec lacus iaculis ornare. Cras orci ante,
                    interdum id risus eget, lobortis congue lectus.
                    In hac habitasse platea dictumst.
                </div>
            </div>
        </div>
    </li>
</ul>

Use case

Do

• Use this component at the end of a page to diplay the FAQ.

Don't

• Use this component to display important content that need to be shown right the way.