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
<ul class="accordion accordion-bordered accordion-multiselectable">
<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.
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
Åbn/luk alle
<div>
<button class="accordion-bulk-button"
data-accordion-bulk-expand="true">Åbn alle</button>
<ul class="accordion accordion-bordered accordion-multiselectable">
<li>
<h3>
<button class="accordion-button" aria-expanded="true"
aria-controls="ao1">
Lorem ipsum dolor sit amet</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="ao2">
Consectetur adipiscing elit</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="ao3">
Sed do eiusmod tempor</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="ao4">
Labore et dolore magna</button>
</h3>
<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>
<li>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="ao5">
Ut enim ad minim veniam</button>
</h3>
<div id="ao5" 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 accordion-bordered accordion-multiselectable">
<li>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="error-a1">
Lorem ipsum dolor sit amet</button>
</h3>
<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>
<h3>
<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="#highlight-off"></use></svg>
</span>
</button>
</h3>
<div id="error-a2" aria-hidden="false" class="accordion-content">
<div class="alert alert-error" role="alert" aria-atomic="true"
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>
<h3>
<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>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="error-a4">
Labore et dolore magna</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="error-a5">
Ut enim ad minim veniam</button>
</h3>
<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
<ul class="accordion accordion-bordered accordion-multiselectable">
<li>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="success-a1">
Lorem ipsum dolor sit amet</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="true"
aria-controls="success-a2">
Consectetur adipiscing elit</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="success-a3">
Sed do eiusmod tempor</button>
</h3>
<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>
<h3>
<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"></use></svg>
</span>
</button>
</h3>
<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>
<h3>
<button class="accordion-button" aria-expanded="false"
aria-controls="success-a5">
Ut enim ad minim veniam</button>
</h3>
<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>Uden ramme
Fjern klassen accordion-bordered på elementet med klassen accordion for at fjerne den synlige ramme.