Collapsible jQuery Mobile

Blok konten penutup

Penutup (Collapsibles) memungkinkan Anda menyembunyikan atau menampilkan konten - sangat berguna untuk menyimpan informasi sebagian.

Jika Anda ingin membuat blok konten penutup, berikan atribut data-role="collapsible" ke dalam kontainer (div). Dalam kontainer (div), tambahkan elemen judul (h1-h6), diikuti dengan HTML yang Anda inginkan untuk dijalankan:

Contoh

<div data-role="collapsible">
  <h1>Klik saya - Saya dapat berkeliling! </h1>
  <p> Ini adalah konten penutup. </p>
</div>

Coba sendiri

Secara default, konten ini ditutup. Jika Anda ingin mengembangkan konten saat halaman dijalankan, gunakan data-collapsed="false":

Contoh

<div data-role="collapsible" data-collapsed="false">
  <h1>Klik saya - Saya dapat berkeliling! </h1>
  <p>Sekarang saya secara default dibuka. </p>
</div>

Coba sendiri

Blok penutup yang disusun

Blok konten penutup dapat disusun:

Contoh

<div data-role="collapsible">
  <h1>Klik saya - Saya dapat berkeliling! </h1>
  <p> Ini adalah konten yang dijalankan. </p>
  <div data-role="collapsible">
    <h1>Klik saya - Saya adalah blok penutup yang disusun! </h1>
    <p> Ini adalah konten yang dijalankan dalam blok penutup yang disusun. </p>
  </div>
</div>

Coba sendiri

Petunjuk:Blok konten penutup dapat disusun sebanyak yang Anda inginkan.

Koleksi penutup

Koleksi penutup (Collapsible sets) adalah blok penutup yang di gabung bersama (biasa disebut alat angin). Saat blok baru dibuka, semua blok lain akan ditutup.

Buat beberapa blok konten, lalu pakai data-role="collapsible-set" untuk membalut blok penutup baru:

Contoh

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>Klik saya - Saya dapat berkeliling! </h1>
    <p> Ini adalah konten yang dijalankan. </p>
  </div>
  <div data-role="collapsible">
    <h1>Klik saya - Saya dapat berkeliling! </h1>
    <p> Ini adalah konten yang dijalankan. </p>
  </div>
</div>

Coba sendiri

Contoh Lebih Banyak

Hapus sudut bulat melalui atribut data-inset
Bagaimana menghilangkan sudut bulat di atas collapsibles.
Mengurangi collapsibles melalui data-mini
Bagaimana membuat collapsibles lebih kecil.
Ubah ikon melalui data-collapsed-icon dan data-expanded-icon
Bagaimana mengganti ikon collapsibles (defaultnya adalah + dan -).