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
Detaljer
Mere information
Pellentesque nulla mi, pulvinar id blandit eu, volutpat at libero. Integer euismod augue leo.
Morbi faucibus nunc tortor, condimentum vulputate urna sollicitudin non. Nam commodo nulla metus. Phasellus varius eu dolor nec ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac leo finibus, blandit velit nec, consequat est. Nulla facilisi.
Eksempler og retningslinjer
Installation
HTML Struktur
<details class="details js-details">
<summary class="details-summary">Mere information</summary>
<div class="details-text">
<p>Pellentesque nulla mi, pulvinar id blandit eu, volutpat at
libero. Integer euismod augue leo. </p>
<p>Morbi faucibus nunc tortor, condimentum vulputate urna
sollicitudin non. Nam commodo nulla metus. Phasellus varius eu
dolor nec ultricies. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Mauris ac leo finibus, blandit velit nec,
consequat est. Nulla facilisi.</p>
</div>
</details>
Javascript
Detaljer komponenten kræver JavaScript for at fungere i alle browsers. Man kan enten gøre brug af DKFDS.init()
eller initiere komponenten manuelt med nedenstående:
new DKFDS.Details(document.getElementById('DETAILS-ID'));
Attributterne aria-expanded
og aria-hidden
tilføjes automatisk i JavaScript i de browsers, hvor det er nødvendigt.