Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
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.
-
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.
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.
-
-
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
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.
-
-
Varianter
Åbn/luk alle
-
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.
-
-
-
Med succesbeskeder
Referencer
Installation
HTML Struktur
<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
<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>
Med fejl
<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>
<h5>
<button class="accordion-button accordion-error " 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 xlink:href="#highlight-off"></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 xlink:href="#highlight-off"></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 xlink:href="#report-problem"></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>
Med succesbeskeder
<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 xlink:href="#check-circle"></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>