Element 05: Show Hide Button & Toggle Content or Accordion / Toggle Menu

Toggle Show Hide Button

Digunakan untuk membuat widget interaktif yang dapat dibuka dan tutup oleh pengguna sesuai permintaan. Secara default widget ini ditutup, akan menampilkan kontak didalamnya ketika pengguna menekan tombol perintah.

Segala konten dapat dimasukkan ke dalam widget ini.

Spoiler:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>

---

Toggle Content or Accordion / Toggle Menu

Menentukan konten tambahan yang dapat dibuka dan tutup pengguna sesuai permintaan dalam beberapa kelompok, biasanya digunakan untuk daftar pertanyaan atau FAQ (Frequently Asked Questions).

Accordion First Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Second Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Third Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

Accordion Fourth Title

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi minus itaque molestias placeat ipsa tempore hic possimus eveniet libero vel, corporis voluptatum. Delectus, facilis itaque.

!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>

  ...
  
  ...
</div>

• Gunakan classname alt (ditandai pada kode di atas) untuk mengubah gaya icon
• Jumlah widget accordion yang bisa Anda Tambahkan tidak terbatas