Blok Konten dilipat
Collapsibles memungkinkan Anda untuk menyembunyikan atau menampilkan konten, yang berguna untuk menyimpan bagian informasi.
Untuk membuat blok dilipat konten, menetapkan data-role="collapsible" atribut untuk sebuah wadah. Dalam wadah (div) , menambahkan header (H1-H6) atau elemen legenda, diikuti oleh markup HTML Anda ingin diperluas:
Contoh
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded
content.</p>
</div>
Cobalah sendiri " Secara default, konten ditutup. Untuk memperluas konten ketika beban halaman, penggunaan data-collapsed="false" :
Contoh
<div data-role="collapsible" data-collapsed="false" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm
now expanded by default.</p>
</div>
Cobalah sendiri " Bersarang dilipat Blok
blok konten dilipat bisa bersarang (a dilipat di dalam dilipat):
Contoh
<div data-role="collapsible" >
<h1>Click me - I'm collapsible!</h1>
<p>I'm the expanded content.</p>
<div
data-role="collapsible" >
<h1>Click me - I'm a
nested collapsible block!</h1>
<p>I'm the expanded
content in the nested collapsible block.</p>
</div>
</div>
Cobalah sendiri " blok konten dilipat dapat bersarang sebanyak yang Anda inginkan.
Set dilipat
set dilipat adalah blok dilipat yang dikelompokkan bersama (sering disebut sebagai akordeon). Ketika blok baru dibuka, semua blok lainnya dekat.
Buat beberapa blok konten dilipat, dan kemudian membungkus wadah baru dengan data-role = "collapsibleset" di sekitar blok dilipat:
Contoh
<div data-role="collapsibleset" >
<div
data-role="collapsible">
<h1>Click me - I'm
collapsible!</h1>
<p>I'm the expanded content.</p>
</div>
<div data-role="collapsible">
<h1>Click me - I'm collapsible!</h1>
<p>I'm the
expanded content.</p>
</div>
</div>
Cobalah sendiri " Contoh lebih
dilipat popup
Cara membuat popup dilipat.
Hapus sudut bulat dengan data-inset atribut
Cara menghapus sudut membulat dan menambah lebar penuh pada collapsibles.
Mengecilkan collapsibles dengan data-mini atribut
Cara membuat collapsibles lebih kecil.
Mengubah icon dengan data-runtuh-ikon dan data-diperluas-icon
Bagaimana mengubah ikon dari collapsibles (default + dan -).
Mengubah posisi ikon
Bagaimana mengubah posisi ikon collapsibles (default adalah kiri).