Vælg et tema Luk
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Borger.dk tema
Virk tema
Kode
Accordions
Eksempel på accordion komponent
Lorem ipsum dolor sit amet
Information
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.
Eksempler og retningslinjer
Installation
HTML Struktur
Kodeeksempel
Kopiér kode
<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
Varianter
Åbn/luk alle
Kodeeksempel
Kopiér kode
<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
Kopiér kode
<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
Kopiér kode
<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>