Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Accordions
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
<ul class="accordion">
<li>
<h2>
<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>
</h2>
<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.
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 |
Varianter
Åbn/luk alle
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">
Lorem ipsum dolor sit amet
</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">
Consectetur adipiscing elit
</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">
Sed do eiusmod tempor
</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">
Labore et dolore magna
</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
Kodeeksempel
<ul class="accordion">
<li>
<h5>
<button class="accordion-button" aria-expanded="false" aria-controls="error-a1">
Lorem ipsum dolor sit amet
</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">
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="#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'>
<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">
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="#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">
Labore et dolore magna
</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
Kodeeksempel
<ul class="accordion">
<li>
<h4>
<button class="accordion-button" aria-expanded="false" aria-controls="success-a1">
Lorem ipsum dolor sit amet
</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">
Consectetur adipiscing elit
</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">
Sed do eiusmod tempor
<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">
Labore et dolore magna
</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>