Gå til sidens indhold
Det Fælles DesignsystemDevelop

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Accordions

En accordion er et grafisk element, som du kan bruge til at skjule og vise indhold med. Vær opmærksom på, at skjult indhold risikerer at blive set i mindre grad af brugerne, end det som er umiddelbart synligt på siden.

Åbn dette eksempel i et nyt vindue: accordion
Eksempel på accordion

  • 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.

Sådan bruges komponenten

Anvendes til

Accordions er interaktive overskrifter, der anvendes til at skjule og vise det relaterede indhold.

Anvendes ikke til

Accordions erstatter ikke individuelle trin i en selvbetjeningsløsning eller sider på en hjemmeside.

Brug ikke accordions til små mængder indhold, der i stedet kunne stå synligt på siden.

Brug ikke accordions til at kollapse indhold i fx søgeresultater eller andre længere oversigter.

Brug ikke accordions til at opdele et logisk flow eller en sekvens af handlinger. Der bør du eventuelt i stedet anvende en trinindikator.

Brug ikke accordions inde i andre accordions. Hvis du har brug for at gruppere accordions, anvend da almindelige overskrifter.

Vejledning

Accordions bliver fremvist i lodret rækkefølge med synlig overskrift. Ved at klikke på accordion folder beskrivelsen af indholdet sig ud. Klikker du igen, folder beskrivelsen sammen igen.

Overvej at lade den accordion, som har det vigtigste indhold, være foldet ud, når brugerne kommer ind på siden. Så er du sikker på, at dine brugere læser den.

Generelt er det ikke en god løsning at skjule indhold for at gøre siden mere spiselig. Overvej om det er nødvendigt at kollapse indhold og hvorfor, det er det. Hvis indholdet er unødigt langt eller uoverskueligt, bør du i stedet omformulere teksten og eventuelt fordele den på flere sider.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Åbn dette eksempel i et nyt vindue: accordion-error
Eksempel på accordion med fejl

  • 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.

Gå til eksemplets kode: accordion-error

Varianter

Åbn/luk alle

Åbn dette eksempel i et nyt vindue: accordion-bulk-open
Eksempel på accordions med åbn alle funktion

  • 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.

Gå til eksemplets kode: accordion-bulk-open

Med succesbeskeder

Åbn dette eksempel i et nyt vindue: accordion-success
Eksempel på accordion med succesbesked

Gå til eksemplets kode: accordion-success

Referencer

Installation

HTML Struktur

Kodeeksempel
<ul class="accordion">
    <li>
        <h2>
            <button class="accordion-button" aria-expanded="true" aria-controls="a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h2>
        <div id="a1" 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>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h2>
        <div id="a2" 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>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
            </button>
        </h2>
        <div id="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>
        <h2>
            <button class="accordion-button" aria-expanded="false" aria-controls="a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h2>
        <div id="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>
</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.

Overskriften på en accordion skal angives som en heading. Sørg for at anvende det korrekte heading-niveau, som passer semantisk ind i konteksten på siden.

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-UL-GROUP-ID')).init();

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

Sprog

Hvis du ønsker at anvende et andet sprog end dansk i JavaScript-koden for accordions med åbn/luk alle-funktionen, skal du selv give din oversættelse med og derefter initiere komponenten manuelt. Husk at opdatere værdien i attributten “lang” i din sides html-tag.

new DKFDS.Accordion(document.getElementById('ACCORDION-UL-GROUP-ID'), {
  "open_all": "Åbn alle", 
  "close_all": "Luk alle" 
}).init();

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

Åbn/luk alle

Vis dette eksempel i et nyt vindue: accordion-bulk-open
Kodeeksempel
<div>
    <button class="accordion-bulk-button" data-accordion-bulk-expand="true">Åbn alle</button>
    <ul class="accordion">
        <li>
            <h4>
                <button class="accordion-button" aria-expanded="true" aria-controls="ao1">
                    <span class="accordion-title">Lorem ipsum dolor sit amet</span>
                </button>
            </h4>
            <div id="ao1" 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>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao2">
                    <span class="accordion-title">Consectetur adipiscing elit</span>
                </button>
            </h4>
            <div id="ao2" 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>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao3">
                    <span class="accordion-title">Sed do eiusmod tempor</span>
                </button>
            </h4>
            <div id="ao3" 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>
            <h4>
                <button class="accordion-button" aria-expanded="false" aria-controls="ao4">
                    <span class="accordion-title">Labore et dolore magna</span>
                </button>
            </h4>
            <div id="ao4" 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>
</div>
Gå til eksemplets retningslinjer

Med fejl

Vis dette eksempel i et nyt vindue: accordion-error
Kodeeksempel
<ul class="accordion">
    <li>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h5>
        <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 class="accordion-error">
        <h5>
            <button class="accordion-button" aria-expanded="true"
                aria-describedby="error-a2-error" aria-controls="error-a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
                <span class="accordion-icon">
                    <span class="icon_text">Fejl</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#error"></use></svg>
                </span>
            </button>
        </h5>
        <div id="error-a2" aria-hidden="false" class="accordion-content">
            <div class="alert alert-error" role="alert" id='error-a2-error'>
                <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
                <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>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
                <span class="accordion-icon">
                    <span class="icon_text">Advarsel</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#warning"></use></svg>
                </span>
            </button>
        </h5>
        <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>
        <h5>
            <button class="accordion-button" aria-expanded="false" aria-controls="error-a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h5>
        <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>
</ul>
Gå til eksemplets retningslinjer

Med succesbeskeder

Vis dette eksempel i et nyt vindue: accordion-success
Kodeeksempel
<ul class="accordion">
    <li>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a1">
                <span class="accordion-title">Lorem ipsum dolor sit amet</span>
            </button>
        </h4>
        <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>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a2">
                <span class="accordion-title">Consectetur adipiscing elit</span>
            </button>
        </h4>
        <div id="success-a2" 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>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a3">
                <span class="accordion-title">Sed do eiusmod tempor</span>
                <span class="accordion-icon">
                    <span class="icon_text">Succes</span>
                    <svg class="icon-svg" focusable="false" aria-hidden="true"><use href="#success"></use></svg>
                </span>
            </button>
        </h4>
        <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>
        <h4>
            <button class="accordion-button" aria-expanded="false" aria-controls="success-a4">
                <span class="accordion-title">Labore et dolore magna</span>
            </button>
        </h4>
        <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>
</ul>
Gå til eksemplets retningslinjer

Om custom elements

Accordions har to custom elementer tilknyttet: fds-accordion og fds-accordion-group.

Brug en fds-accordion-group til at sætte samme overskriftsniveau på alle accordions.

Placer det ønskede indhold i en <div> direkte inde i <fds-accordion> – denne div fungerer som accordionens indholdscontainer.

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-accordion> med <div class="fds-accordion"> og <fds-accordion-group> med <div class="fds-accordion-group">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.

Eksempler

Accordion lavet med custom element

Åbn i et nyt vindue

Indhold i accordionen

 

<fds-accordion heading="Dette er en accordion" content-id="accordion-custom-id">
    <div>
        <p>Indhold i accordionen</p>
    </div>
</fds-accordion>

<fds-accordion>
    <h3>
        <button class="accordion-button" aria-expanded="false" type="button" aria-controls="acce01138122">
            <span class="accordion-title">Dette er en accordion</span>
        </button>
    </h3>
    <div class="accordion-content" id="acce01138122" aria-hidden="true">
        <p>Her er en paragraf inde i accordionen.</p>
    </div>
</fds-accordion>

Accordiongruppe lavet med custom element

Åbn i et nyt vindue

Her er en paragraf inde i accordionen.

Her er en paragraf inde i accordionen.

Her er en paragraf inde i accordionen.

 
<fds-accordion-group has-bulk-button>
    <fds-accordion heading="Accordion 1" content-id="accordion-1">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Accordion 2" content-id="accordion-2">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>
    <fds-accordion heading="Accordion 3" content-id="accordion-3">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>
</fds-accordion-group>

Varianter

Begge attributter skal angives samtidig for at varianten aktiveres. Hvis kun én af dem er sat, vises ingen variant. Når begge er til stede, tilføjes et ikon-element i knappen med den angivne tekst (variant-text) og et SVG-ikon refereret via ikonets ID (variant-icon).

Åbn i et nyt vindue

Her er en paragraf inde i accordionen.

Her er en paragraf inde i accordionen.

Her er en paragraf inde i accordionen.

Her er en paragraf inde i accordionen.

 
<fds-accordion-group heading-level="h3">

    <fds-accordion heading="Variant" content-id="acce08131" variant-text="Information" variant-icon="info">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>

    <fds-accordion heading="Variant" content-id="acce08132" variant-text="Succes" variant-icon="success">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>

    <fds-accordion heading="Variant" content-id="acce08133" variant-text="Advarsel" variant-icon="warning">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>

    <fds-accordion heading="Variant" content-id="acce08134" variant-text="Fejl" variant-icon="error" has-error="true">
        <div>
            <p>Her er en paragraf inde i accordionen.</p>
        </div>
    </fds-accordion>

</fds-accordion-group>

fds-accordion-group

Attributter

Attribut Beskrivelse
heading-level Sæt overskriftsniveau for alle accordions i gruppen.
has-bulk-button Sæt til true for at tilføje en knap til gruppen, der åbner/lukker alle accordions.
open-all-text Erstat teksten ‘Åbn alle’ på åbn/luk-knappen.
close-all-text Erstat teksten ‘Luk alle’ på åbn/luk-knappen.

Funktioner

Funktion Beskrivelse
toggleAllAccordions() Hvis alle accordions er foldet ud, foldes de sammen. Hvis mindst én accordion er foldet sammen, foldes alle ud.

fds-accordion

Attributter

Attribut Beskrivelse
heading Overskriften i accordionen.
heading-levelOverskriftsniveauet i accordionen (overskrives ved oprettelse, når heading-level i fds-accordion-group er sat). Standardværdi er "h3".
expanded Sæt til "true", hvis accordionen skal være åben, når siden indlæses. Standardværdi er "false".
content-id Sæt ID for content-elementet i accordionen. Standardværdien er tilfældigt genereret.
has-error Sæt til "true" for at give accordionen en rød kant. Sørg for altid at give en passende fejlbesked, når denne attribut bruges.
variant-text
variant-icon		 Sæt en tilhørende besked og ikon på accordionen. Sørg altid for at anvende begge attributter samtidigt. Anbefalinger til kombinationer:
  • variant-text="Information" og variant-icon="info"
  • variant-text="Succes" og variant-icon="success"
  • variant-text="Advarsel" og variant-icon="warning"
  • variant-text="Fejl" og variant-icon="error" og has-error="true"

Funktioner

Funktion Beskrivelse
expandAccordion() Fold en accordion ud.
collapseAccordion() Fold en accordion sammen.
toggleAccordion() Hvis en accordion er foldet ud, så foldes den sammen. Er den foldet sammen, foldes den ud.

Events

Event Beskrivelse
fds-accordion-expanded Udløses når accordionen foldes ud.
fds-accordion-collapsed Udløses når accordionen foldes sammen.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies