Brukes for å presentere mye tekst på en måte som gjør det lett for brukeren å få oversikt og raskt se hva en skal velge. De vil spare tid for brukeren ved at de ikke trenger å pløye informasjon som ikke er relevant.

Den kan også brukes for å presentere tillegsinformasjon på en artikkel (evt andre sider).

Bruk gode titler på inngangene slik at brukeren forstår hva som ligger under og raskt før oversikt over innholdet på side.

Accordions should be used when supplementing information, that is related to the subject presented on the page. Typical scenarios are when presenting information about a service, and want to supplement with related content.

Light

Legend

Expanded

<h2 class="accordion__legend">Legend</h2>
<section class="accordion">
    <h2 class="accordion__heading accordion__heading--expanded">
        <button class="accordion__button" aria-expanded="true" aria-controls="uniqe_block_uid_1" id="accordion-item-1">
            <span class="accordion__icon accordion__icon--water"></span>
            Accordion Header 1
        </button>
    </h2>
    <div class="accordion__region accordion__region--expanded" role="region" id="uniqe_block_uid_1" aria-labelledby="accordion-item-1" aria-hidden="false">
        <p>
            Expanded
        </p>
    </div>
    <h2 class="accordion__heading">
        <button class="accordion__button link--no-underline" aria-expanded="false" aria-controls="uniqe_block_uid_2" id="accordion-item-2">
            <span class="accordion__icon accordion__icon--water"></span>
            Accordion Header 2
        </button>
    </h2>
    <div class="accordion__region" role="region" id="uniqe_block_uid_2" aria-labelledby="accordion-item-2" aria-hidden="true">
        <p>
            Collapsed
        </p>
    </div>
</section>

With Label

LegendLabel

Expanded

<h1>Test</h1>

Test