Kode

Accordions

Eksempler og retningslinjer

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

Event key	Element	Beskrivelse
fds.accordion.open	`button.accordion-button`	Når en accordion bliver foldet ud, bliver eventet `fds.accordion.open` udløst på accordion knappen
fds.accordion.close	`button.accordion-button`	Når en accordion bliver foldet ind, bliver eventet `fds.accordion.close` udløst på accordion knappen

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.

Med fejl

Vis dette eksempel i et nyt vindue

<ul class="accordion">
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="error-a1">
            Lorem ipsum dolor sit amet</button>
        <div id="error-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>
    <li>
        <button class="accordion-button accordion-error "
            aria-expanded="true" aria-describedby="error-a2"
            aria-controls="error-a2">
            Consectetur adipiscing elit
            <span class="accordion-icon">
                <span class="icon_text">Fejl</span>
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#close-circle-outline"></use></svg>
            </span>
        </button>

        <div id="error-a2" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert"
                aria-label="Fejlbesked i accordion">
                <div class="alert-body">
                    <p class="alert-text">Sed ut perspiciatis unde omnis
                        iste natus error sit voluptatem accusantium
                        doloremque laudantium.</p>
                </div>
            </div>
            <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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="error-a3">
            Sed do eiusmod tempor
            <span class="accordion-icon">
                <span class="icon_text">Advarsel</span>
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#alert-outline"></use></svg>
            </span>
        </button>
        <div id="error-a3" 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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="error-a4">
            Labore et dolore magna</button>
        <div id="error-a4" 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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="error-a5">
            Ut enim ad minim veniam</button>
        <div id="error-a5" 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>

Med succesbeskeder

Vis dette eksempel i et nyt vindue

<ul class="accordion">
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="success-a1">
            Lorem ipsum dolor sit amet</button>
        <div id="success-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>
    <li>
        <button class="accordion-button" aria-expanded="true"
            aria-controls="success-a2">
            Consectetur adipiscing elit</button>

        <div id="success-a2" aria-hidden="false" 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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="success-a3">
            Sed do eiusmod tempor</button>
        <div id="success-a3" 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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="success-a4">
            Labore et dolore magna
            <span class="accordion-icon">
                <span class="icon_text">Success</span>
                <svg class="icon-svg" focusable="false" aria-hidden="true"><use xlink:href="#check-circle-outline"></use></svg>
            </span>
        </button>
        <div id="success-a4" 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>
    <li>
        <button class="accordion-button" aria-expanded="false"
            aria-controls="success-a5">
            Ut enim ad minim veniam</button>
        <div id="success-a5" 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>