Spoiler dan Accordion Details

Elemen Desain Website/Blog

Masih membahasa tentang Elemen2 website/blog yang merupakan komponen-komponen penting yang membentuk tampilan dan fungsionalitas sebuah website/blog dapat berjalan dengan baik.

Desain Elemen Website/Blog, terbagi menjadi dua kategori utama:

1. Elemen Konten
2. Elemen Desain

dan saat ini kita membahas seputar elemen desain dan kali ini kita akan menguraikan Elemen spoiler yang biasanya digunakan untuk menyembunyikan konten dari pandangan pembaca sampai mereka secara aktif memilih klik untuk melihatnya.

Spoiler Details

Elemen Spoiler dilengkapi dengan contoh penggunaan code Summary:

Contoh Elemen Spoiler

<details class="sp">
  <summary data-show='Show all' data-hide='Hide all'>Title</summary><p>
  Konten Spoiler Anda di sini!
  </p></details>

Detail dengan kelas SP, dilengkapi dengan summary Show dan Hide.

Lihat detail sp Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat

Collapsible Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt quam ut mi lscelerisque, eu tempus lectus ornare.Mauris lacinia, orci et tincidunt semper, velit magna egestas dui, in faucibus lectus eros non eros

1. Pendahuluan
   • Apa Itu?
   • Manfaatnya
2. Cara Menggunakannya
   1. Langkah 1: Instalasi
   2. Langkah 2: Konfigurasi
   3. Langkah 3: Mulai Menggunakan
3. Contoh Kegunaan
   • Kasus 1: Website Bisnis
   • Kasus 2: Blog Tutorial
4. Item 1
5. Item 2
• Sub-item 1
• Sub-item 2

Cara Penggunaan Spoiler

<details class="sp">
  <summary data-show='Show all' data-hide='Hide all'>Title</summary><p>
  Konten Spoiler Anda di sini!
  </p></details>

Accordion

Apa itu Accordion?

Accordion adalah elemen HTML yang memungkinkan Anda menampilkan konten tersembunyi yang dapat diperluas dan diciutkan oleh pengguna kapan saja untuk mempercantik tata letak sebuah website

Apa Fungsinya

untuk menghemat space halaman posting atau untuk membuat para pembaca menjadi merasa lebih penasaran

Penggunaan Alternatif Accordion

 

<!--Accordion Alt-->
<details class="ac alt">
<summary>Title</summary>
<div class="aC">
<p>Write Here!</p>
</div> </details>

Penggunaan Accordion Standar

 
<!--Accordion Default>
  <details class="ac">
  <summary>Title</summary>
  <div class="aC">
    <p>Tulis di sini!</p>
  </div>
</details>

Title_is_here

Your_text_is_here apq yah.

Title_is_here

Your_text_is_here.

Spoiler New Style

Spoiler rahSpo

Spoiler sering diartikan sebagai cara untuk menyembunyikan isi postingan, menghemat space, atau membuat pembaca penasaran.

Uji Percobaan

Write Content here!simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum!simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Accord Awesome

Font Awesome (fa) menawarkan ratusan ikon gratis yang dapat digunakan dalam berbagai elemen. Kali ini, kita akan mempercantik Accordion dengan ikon fa. Pilihan ikon terbaik bergantung pada desain dan fungsionalitas Accordion yang diinginkan.

Pertama

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Kedua

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ketiga

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Keempat

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Kelima

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Keenam

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Cara Penggunaan Code

 
<div class="acord">
  <input type="checkbox" name="myaC" id="aC1">
  <label for="aC1">
    <i class="fa fa-coffee"></i> Uji Percobaan </label>
  <i class="fa fa-chevron-circle-down"></i>
  <div class="content">Write Content here!</div>
</div>

 <!-- Container for accordion -->
<div class="acord">
  <!-- Checkbox for toggling accordion -->
  <input type="checkbox" name="myaC" id="aC1">
  
  <!-- Label for the checkbox, including a coffee cup icon and text -->
  <label for="aC1">
    <i class="fa fa-coffee"></i> Uji Percobaan
  </label>
  
  <!-- Icon for indicating accordion state (down or up) -->
  <i class="fa fa-chevron-circle-down"></i>
  
  <!-- Content of the accordion, initially hidden -->
  <div class="content">Write Content here!</div>
</div>

Daftar Isi Content

---

Baca Juga