Tutorial SQ: Cara Membuat Accordion Modern dengan HTML, CSS, dan JavaScript

Dalam tutorial ini, SQ membagikan langkah-langkah sederhana untuk membuat accordion modern yang elegan dan responsif menggunakan HTML, CSS, dan JavaScript. Panduan ini membantu SQ atau siapa pun untuk memahami struktur, tampilan, dan fungsi interaktif accordion dengan mudah. Cocok untuk pemula hingga yang ingin mempercantik tampilan website dengan komponen UI yang rapi dan profesional.

Pada panduan ini, SQ akan menjelaskan bagaimana cara membuat accordion modern yang cantik, rapi, dan responsif. Accordion adalah elemen yang bisa membuka dan menutup bagian konten, sehingga halaman terlihat lebih ringkas. SQ membuat langkah-langkah ini supaya mudah dipahami bahkan bagi pemula.

Pertama, SQ membuat struktur dasar HTML yang berisi judul dan beberapa tombol accordion. Tiap tombol memiliki panel konten yang akan muncul ketika tombol ditekan. Setelah itu, SQ menambahkan CSS untuk memberikan tampilan modern, seperti efek bayangan, radius membulat, warna lembut, dan animasi transisi agar pergerakannya halus. Bagian ini sangat penting agar accordion terlihat profesional.

Selanjutnya, SQ menggunakan JavaScript sederhana untuk memberikan fungsi interaktif. Saat tombol diklik, skrip akan membuka atau menutup panel dengan mengubah nilai max-height. SQ juga menambahkan pergantian ikon plus dan minus secara otomatis agar pengguna lebih mudah memahami status accordion.

Dengan tiga komponen ini—HTML, CSS, dan JavaScript—SQ berhasil membuat accordion modern yang responsif, ringan, dan cocok untuk kebutuhan website apa pun.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  margin: 0;
  padding: 20px;
}

/* Header */
h2 {
  text-align: center;
  margin-bottom: 15px;
  color: #222;
}

/* Accordion Button */
.accordion {
  background: #ffffff;
  color: #333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-weight: bold;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: 0.3s;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hover & Active state */
.accordion:hover {
  background: #f0f0f0;
}
.accordion.active {
  background: #e6e6e6;
}

/* Icon Plus/Minus */
.accordion::after {
  content: '\002B';
  font-size: 22px;
  color: #666;
  transition: transform 0.3s;
}

.accordion.active::after {
  content: "\2212";
  transform: rotate(180deg);
}

/* Panel Content */
.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.panel p {
  margin: 15px 0;
  color: #444;
  line-height: 1.5;
}
</style>
</head>
<body>

<h2>Accordion Modern</h2>

<button class="accordion">Bagian 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.</p>
</div>

<button class="accordion">Bagian 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.</p>
</div>

<button class="accordion">Bagian 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<script>
const acc = document.querySelectorAll(".accordion");

acc.forEach(btn => {
  btn.addEventListener("click", () => {
    btn.classList.toggle("active");

    let panel = btn.nextElementSibling;

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
      panel.style.padding = "0 18px";
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.padding = "18px";
    }
  });
});
</script>

</body>
</html>