Tag Details HTML5

html5

Tag HTML5 dipergunakan untuk menyembunyikan isi konten tambahan. Sebelumnya paling sering digunakan itu jQuery accordion dan sekarang ini tag Details pada HTML5 membantu penggunaan jQuery tersebut.

Tag <details> menentukan detail tambahan yang bisa dilihat atau disembunyikan pengguna saat diminta.

Tag <details> dapat digunakan untuk membuat widget interaktif yang dapat dibuka dan ditutup pengguna. Segala jenis konten dapat dimasukkan ke dalam tag.

Konten elemen <details> tidak boleh terlihat kecuali atribut terbuka ditetapkan.

Contoh:

Sosiologi mempunyai empat ciri ilmu, antara lain:
  • Empiris, yaitu didasarkan pada observasi (pengamatan) yang hasilnya tidak bersifat spekulasi (menduga-duga).
  • Teoritis, yaitu selalu berusaha menyusun abstraksi dari hasil observasi yang konkret di lapangan, dan abstraksi tersebut merupakan kerangka dari unsur-unsur yang tersusun secara logis dan bertujuan menjalankan hubungan sebab akibat sehingga menjadi teori.
  • Kumulatif, yaitu disusun atas dasar teori-teori yang sudah ada, kemudian diperbaiki, diperluas sehingga memperkuat teori-teori yang lama.
  • Non etis, yaitu pembahasan suatu masalah tidak mempersoalkan baik atau buruk masalah tersebut, tetapi lebih bertujuan untuk menjelaskan masalah tersebut secara mendalam.

 

Atribut OPEN

Tambahan atribut OPEN digunakan untuk membuat konten yang bersembunyi terlihat.

Contoh:

 

Sosiologi mempunyai empat ciri ilmu, antara lain:
  • Empiris, yaitu didasarkan pada observasi (pengamatan) yang hasilnya tidak bersifat spekulasi (menduga-duga).
  • Teoritis, yaitu selalu berusaha menyusun abstraksi dari hasil observasi yang konkret di lapangan, dan abstraksi tersebut merupakan kerangka dari unsur-unsur yang tersusun secara logis dan bertujuan menjalankan hubungan sebab akibat sehingga menjadi teori.
  • Kumulatif, yaitu disusun atas dasar teori-teori yang sudah ada, kemudian diperbaiki, diperluas sehingga memperkuat teori-teori yang lama.
  • Non etis, yaitu pembahasan suatu masalah tidak mempersoalkan baik atau buruk masalah tersebut, tetapi lebih bertujuan untuk menjelaskan masalah tersebut secara mendalam.
Ini TAG Details yang ada atribut OPEN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pulvinar elit quis dui molestie, interdum mattis erat vehicula. Morbi non dignissim diam. Aenean efficitur iaculis elit, sit amet fringilla eros aliquam in. Aenean consectetur nisi ut dolor facilisis porttitor. Donec sodales mauris ut commodo pretium. In nunc lacus, pellentesque sed laoreet a, suscipit id tortor. Suspendisse eget consectetur quam, non pulvinar dui. Etiam at lorem sit amet ex tempor consequat. Sed vitae ante lectus. Aliquam pellentesque malesuada sapien, sit amet bibendum erat vehicula eu.

Note: Microsoft Edge saat tulisan ini di post belum support untuk Tag Details ini

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.