Formatting: Details

Tentang

Formatting Details adalah format HTML untuk membuat elemen yang bisa dibuka-tutup. Elemen ini sering juga disebut sebagai elemen Accordion - (Demo).



Spesifikasi




Konfigurasi



Keterangan

border
Nilai Pratinjau
no Lihat
yes Lihat

formatting
Secara default, sistem akan memproses semua elemen DETAILS pada penggunaan yang didukung sesuai data spesifikasi. Dengan memberikan nilai no pada konfigurasi ini, elemen details yang bersangkutan tidak akan diproses dengan formatting (akan menggunakan style default browser).



Penggunaan

  1. Definisikan HTML dengan format seperti berikut: 

                
              <details>
                <summary>Item</summary>
                <div>
                  Konten
                </div>
              </details>
    Item
    Konten

    Untuk menambahkan banyak item, tambahkan elemen details lainnya secara berurutan. 

                  
                <details>
                  <summary>Item 1</summary>
                  <div>
                    Konten item 1
                  </div>
                </details>
                <details>
                  <summary>Item 2</summary>
                  <div>
                    Konten item 2
                  </div>
                </details>
    Item 1
    Konten item 1
    Item 2
    Konten item 2

    Keterangan: Pada HTML di atas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


  2. Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen DETAILS.

    Contoh: 
              
  <details data-border='yes'>
    <summary>Item</summary>
    <div>
      Konten
    </div>
  </details>
    Item
    Konten


    Ketika terdapat lebih dari satu item, penambahan konfigurasi dilakukan pada elemen details pertama.

    Contoh: 
                  
                <details data-border='yes'>
                  <summary>Item 1</summary>
                  <div>
                    Konten item 1
                  </div>
                </details>
                <details>
                  <summary>Item 2</summary>
                  <div>
                    Konten item 2
                  </div>
                </details>
    Item 1
    Konten item 1
    Item 2
    Konten item 2


    Elemen details dikatakan berurutan jika tidak terdapat elemen HTML lainnya yang menjadi pemisah. Pada contoh HTML di bawah, sistem formatting akan memberlakukan kedua elemen details secara berbeda karena terdapat elemen br yang menjadi pemisah. Dalam kasus dibawah, konfigurasi yang diterapkan pada kedua elemen akan berbeda. Elemen pertama akan menerapkan konfigurasi border sesuai atribut data-border dan elemen ke-2 akan mengikuti konfigurasi default. 

                  
                <details data-border='yes'>
                  <summary>Item 1</summary>
                  <div>
                    Konten item 1
                  </div>
                </details>

                <br/>
                <br/>

                <details>
                  <summary>Item 2</summary>
                  <div>
                    Konten item 2
                  </div>
                </details>
    Item 1
    Konten item 1


    Item 2
    Konten item 2
Komentar