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">
        <span class="details-summary-text">
            Mere information
        </span>
    </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.