Membuat accordion sederhana dengan HTML dan CSS

Sesuai judul artikel, kali ini kita akan membuat sebuah menu accordion dengan menggunakan HTML dan CSS murni tanpa menggunakan Javascript sedikitpun.

Pada kasus tertentu, suatu halaman web akan dibuka dengan menggunakan browser yang tidak mendukung javascipt, atau mungkin user menonaktifkan fitur javascript tersebut, sehingga menu accordion yang menggunakan javascript tidak bisa dibuka oleh user. Alasan lain mengapa kita tidak menggunakan javascript adalah karena javascript akan dimuat oleh browser dan membuat halaman web kita akan sedikit lebih lama dimuat.

Ada berbagai cara untuk membuat accordion, dan cara yang akan kita bahas untuk membuat accordion di artikel kali ini yaitu dengan memanfaatkan element details dan summary. Bisa dibilang ini adalah cara termudah dan paling bersih untuk membuat accordion tanpa JavaScript.

Buat struktur HTML menggunakan tag details dan summary. Tag summary akan menjadi judul accordion, dan konten yang tersembunyi akan ditempatkan di dalam tag details.

<details> 
  <summary>Judul Accordion 1</summary>
  <p>Konten accordion 1</p> 
</details> 
<details>
  <summary>Judul Accordion 2</summary> 
  <p>Konten accordion 2</p> 
</details>

Kode di atas akan menghasilkan tampilan seperti berikut:

Selanjutnya kita hanya perlu melakukan styling agar tampilan dari accordionnya terlihat lebih menarik dan rapi.

details {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 5px;
  overflow: hidden; /* Untuk memastikan konten tersembunyi dengan baik */
}

summary {
  background-color: #f1f1f1;
  padding: 10px;
  cursor: pointer;
  list-style: none; /* Menghilangkan ikon panah bawaan */
  position: relative; /* Untuk penempatan ::marker */
}

summary::-webkit-details-marker {
  display: none; /* Menghilangkan ikon panah bawaan pada Chrome/Safari */
}

summary::before {
  content: '+'; /* Ikon panah */
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
}

details[open] > summary::before {
  content: '-'; /* Ganti ikon panah saat terbuka */
}

details > p {
  padding: 10px;
}

Maka hasilnya akan tampil seperti ini:

Dengan langkah-langkah ini, kita akan memiliki accordion sederhana yang dapat dibuka dan ditutup dengan mengklik judulnya, tanpa perlu JavaScript.