Kode

Accordions

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<ul class="accordion">
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="a1">
            Lorem ipsum dolor sit amet
            <span class="accordion-icon">
                <span class="icon_text">Information</span>
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#info"></use></svg>
            </span>
        </button>
        <div id="a1" aria-hidden="true" class="accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                do eiusmod tempor incididunt ut labore et dolore magna
                aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </li>
</ul>

Kopiér ovenstående kode for at indsætte én accordion. Ønsker du flere kan du duplikere <li> elementet.

Husk at tilpasse koden, således at ikke kun indholdet passer, men også attributterne. Herunder er særligt aria-controls og id vigtige, da disse skal være unikke.

Javascript

Accordion komponenten kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.Accordion(document.getElementByID('ACCORDION-ID'));

Attributten aria-hidden tilføjes automatisk i JavaScript, hvis man har undladt at tilføje attributten.

Events

Varianter

Tilføj ramme

Tilføj klassen accordion-bordered til elementet med klassen accordion for at tilføje en synlig ramme.

Tillad flere åbne accordions

For at tillade at flere accordions kan være åbne på samme tid, kan man tilføje klassen accordion-multiselectable til elementet med klassen accordion.