Cara Membuat Accordion Keren di HTML

Accordion yang dibahas disini bukalah alat musik Accordion. Tetapi, Accordion html yang mirip dengan spoiler.

Apa itu Accordion HTML?

Accordion HTML adalah sebuah elemen html yang mirip dengan spoiler yang fungsinya juga untuk menampilkan atau menyembunyikan sebuah teks atau dokumen lain (show/hide).

Accordion banyak digunakan pada postingan blog, tujuannya Untuk mempersingkat tampilan konten dengan cara menyembunyikannya didalam Accordion dan dapat dilihat telah seseorang menekan tombol Accordion/spoiler-nya.

Accordion HTML bisa juga dijadikan menu didalama Postingan/dokumen HTML (biasa disebut Menu Accordion)

Menurut saya pribadi, Accordion HTML memiliki tampilan yang lebih keren dibandingkan dengan Spoiler HTML

Agar lebih jelas, berikut ini adalah contoh widget Accordion HTML (klik untuk membuka)

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Nah, berdasarkan contoh diatas mungkin Anda bertanya-tanya:

"Bagaimana cara membuat widget Accordion di dalam postingan?

Untuk jawaban dari pertanyaan tersebut, kita akan menjawabnya dibawah ini:

Cara Membuat Accordion Keren di HTML

Nah, untuk membuat widget Accordion dengan HTML sebenarnya sangat mudah.

Silahkan Anda ikut langkah-langkah cara membuat Accordion di HTML keren.

1. Buat Struktur code HTML

Kita buat kode html seperti berikut ini di dokumen HTML. Kode HTML berfungsi untuk memanggil semua fungsi dari source code JavaScript dan CSS.

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>

2. Tambahkan Source code JavaScript

Setelah itu kita tambahkan script JavaScript diatas tag </body>, tujuan dari script ini untuk membuat widget Accordion dapat di buka satu persatu tanpa menutup Accordion yang dibukan pertama kalinya

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

3. Tambahkan Source code CSS

Langkah selanjutnya, kita tambahkan kode CSS berikut ini ke dalam tag <style>. Kode CSS (Cascading Style Sheets) berfungsi untuk memberi dan mengatur tampilan elemen HTML agar lebih menarik dan keren

<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>

Penutupan

Nah kira-kira seperti itulah artikel tentang cara membuat Accordion di HTML keren dan mudah yang bisa saya berikan pada artikel kali ini

Terima kasih telah berkunjung ke postingan ini dan nantikan artikel coding berikutnya...