HTML 5 – Elemen Detail dan Summary

details-simplest-example

Cara kerja elemen detail dan summary sama seperti accordian widget di JQuery . Elemen detail dapat digunakan dimana saja , asalkan masih didalam elemen body . Contoh sederhananya adalah seperti ini :

<details>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
</details>

Demo dapat Anda lihat pada gambar berikut :

details-keyboard-navigation

Elemen detail juga dapat digabungkan dengan kode HTML5 : summary. contoh lebih jelasnya seperti kode dibawah ini :

<details>
    <summary>Hello World</summary>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    <details>
        <summary>Hi, How are you?</summary>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, impedit.</p>
    </details>
</details>