Home Coding Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS

Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS

Farhan Hidayat 27 April 2026 8 min read

Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS

Ingin membuat tampilan FAQ di website jadi lebih rapi dan interaktif? Nah, kamu bisa memakai teknik accordion agar konten jadi lebih ringkas dan mudah diakses. Di artikel ini, kita akan bahas cara membuat accordion HTML dengan kombinasi HTML, CSS, dan JavaScript secara praktis. Jadi, meskipun kamu masih pemula, kamu tetap bisa mengikuti langkahnya tanpa ribet.

Apa Itu Accordion FAQ dan Kenapa Penting?

Accordion FAQ adalah elemen UI yang memungkinkan pengguna membuka dan menutup konten dengan klik. Dengan kata lain, accordion akan menampilkan bagian yang dibutuhkan dan menyembunyikan sisanya.

Selain itu, penggunaan accordion juga membantu tampilan website jadi lebih clean. Misalnya, pada halaman FAQ, kamu tidak perlu menampilkan semua jawaban sekaligus. Akibatnya, halaman jadi lebih ringan dan nyaman dibaca.

Selain itu, banyak developer menggunakan accordion untuk dropdown menu atau section informasi. Jadi, selain rapi, pengalaman pengguna juga meningkat.

Also Read: 7 Efek Shadow & Glassmorphism CSS yang Bikin Website Mewah

Masalah Umum Saat Membuat FAQ Biasa

Sebelum menggunakan accordion, banyak website menampilkan FAQ dalam bentuk teks panjang. Akibatnya, halaman terlihat penuh dan membingungkan.

Selain itu, user sering kesulitan menemukan jawaban yang mereka cari. Karena semua informasi ditampilkan sekaligus, fokus pembaca jadi mudah hilang.

Lebih lanjut, tampilan yang statis juga membuat website terasa kurang menarik. Oleh karena itu, dibutuhkan solusi yang lebih interaktif.

Also Read: Panduan Membuat Modal Popup Interaktif HTML CSS JS

Solusi – Cara Membuat Accordion HTML Simple

Sekarang kita masuk ke bagian utama, yaitu cara membuat accordion HTML yang simple namun tetap efektif.

1. Struktur Dasar HTML

Pertama, kamu perlu membuat struktur dasar menggunakan HTML. Biasanya, kamu akan menggunakan tombol (untuk klik) dan konten (untuk menampilkan informasi).

<div class="accordion">
  <button class="accordion-btn">Apa itu Accordion?</button>
  <div class="accordion-content">
    <p>Accordion adalah elemen UI untuk menyembunyikan dan menampilkan konten.</p>
  </div>
</div>

2. Styling dengan CSS

Selanjutnya, tambahkan CSS agar tampilannya lebih menarik.

Also Read: 5 Toggle Switch CSS Mirip iOS + Cara Membuatnya

.accordion-btn {
  width: 100%;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
}

Dengan styling ini, tampilan sudah mulai rapi. Namun, kita masih perlu menambahkan interaksi.

3. Interaksi dengan JavaScript

Kamu bisa menambahkan JavaScript sederhana agar accordion bisa terbuka dan tertutup saat diklik.

const buttons = document.querySelectorAll(".accordion-btn");

buttons.forEach(btn => {
  btn.addEventListener("click", () => {
    const content = btn.nextElementSibling;
    content.style.display =
      content.style.display === "block" ? "none" : "block";
  });
});

Dengan script ini, setiap tombol akan bisa toggle konten secara otomatis.

Also Read: Cara Mudah Membuat Sticky Navbar Saat Scroll (HTML & CSS)

Contoh Hasil Accordion FAQ Siap Pakai

Full Coding untuk Accordion FAQ

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accordion FAQ</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", sans-serif;
    }

    body {
      background: linear-gradient(135deg, #eaf1ff, #c9d9ff);
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    .container {
      width: 900px;
      display: flex;
      gap: 40px;
      align-items: center;
    }

    /* LEFT SIDE */
    .left {
      flex: 1;
    }

    .left h1 {
      font-size: 40px;
      font-weight: 700;
    }

    .left h1 span {
      color: #3b82f6;
    }

    .left p {
      margin-top: 10px;
      color: #555;
      font-size: 18px;
    }

    .tech {
      margin-top: 20px;
      display: flex;
      gap: 15px;
    }

    .tech div {
      width: 60px;
      height: 60px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: white;
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .html { background: #ff6b3d; }
    .css { background: #3b82f6; }
    .js { background: #facc15; color: #333; }

    /* RIGHT SIDE */
    .faq-box {
      flex: 1;
      background: white;
      border-radius: 20px;
      padding: 25px;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .faq-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .faq-header .icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #3b82f6;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    .faq-header h2 {
      font-size: 20px;
    }

    .faq-header p {
      font-size: 14px;
      color: #666;
    }

    .accordion {
      border-radius: 12px;
      overflow: hidden;
    }

    .item {
      border: 1px solid #eee;
      border-radius: 12px;
      margin-bottom: 10px;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .item.active {
      box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }

    .title {
      padding: 15px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }

    .title:hover {
      background: #f5f7ff;
    }

    .content {
      max-height: 0;
      overflow: hidden;
      transition: all 0.3s ease;
      padding: 0 15px;
      color: #555;
      font-size: 14px;
    }

    .item.active .content {
      max-height: 200px;
      padding: 15px;
    }

    .arrow {
      transition: 0.3s;
    }

    .item.active .arrow {
      transform: rotate(180deg);
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        width: 90%;
      }
    }
  </style>
</head>
<body>

<div class="container">

  <!-- LEFT -->
  <div class="left">
    <h1>Accordion <span>FAQ</span></h1>
    <p>HTML, CSS & JavaScript</p>

    <div class="tech">
      <div class="html">HTML</div>
      <div class="css">CSS</div>
      <div class="js">JS</div>
    </div>
  </div>

  <!-- RIGHT -->
  <div class="faq-box">
    <div class="faq-header">
      <div class="icon">?</div>
      <div>
        <h2>Frequently Asked Questions</h2>
        <p>Klik pertanyaan untuk melihat jawabannya</p>
      </div>
    </div>

    <div class="accordion">

      <div class="item active">
        <div class="title">
          Apa itu Accordion FAQ?
          <span class="arrow">⌃</span>
        </div>
        <div class="content">
          Accordion FAQ adalah komponen UI yang memungkinkan pengguna membuka dan menutup konten dengan klik, sehingga tampilan lebih rapi dan terorganisir.
        </div>
      </div>

      <div class="item">
        <div class="title">
          Kenapa harus menggunakan Accordion?
          <span class="arrow">⌄</span>
        </div>
        <div class="content">
          Karena membantu menghemat ruang, meningkatkan UX, dan membuat konten lebih mudah dibaca.
        </div>
      </div>

      <div class="item">
        <div class="title">
          Bagaimana cara membuatnya?
          <span class="arrow">⌄</span>
        </div>
        <div class="content">
          Kamu bisa menggunakan kombinasi HTML, CSS, dan JavaScript untuk membuat accordion interaktif.
        </div>
      </div>

      <div class="item">
        <div class="title">
          Apakah bisa digunakan di semua perangkat?
          <span class="arrow">⌄</span>
        </div>
        <div class="content">
          Ya, selama dibuat responsive, accordion bisa digunakan di desktop maupun mobile.
        </div>
      </div>

      <div class="item">
        <div class="title">
          Apakah Accordion bagus untuk SEO?
          <span class="arrow">⌄</span>
        </div>
        <div class="content">
          Ya, karena membantu struktur konten dan meningkatkan pengalaman pengguna.
        </div>
      </div>

    </div>
  </div>

</div>

<script>
  const items = document.querySelectorAll(".item");

  items.forEach(item => {
    item.querySelector(".title").addEventListener("click", () => {

      items.forEach(i => {
        if(i !== item) i.classList.remove("active");
      });

      item.classList.toggle("active");
    });
  });
</script>

</body>
</html>

Setelah mengikuti semua langkah, kamu langsung bisa membuat accordion FAQ yang terbuka dan tertutup hanya dengan satu klik. Selain itu, tampilannya juga lebih clean dan modern.

Ketika user mengklik pertanyaan, jawaban akan muncul. Sebaliknya, saat diklik lagi, konten akan tertutup. Alur ini membuat pengalaman pengguna jadi lebih nyaman.

Also Read: Cara Membuat 10 Animasi Scroll CSS & JS yang Smooth

Cara Membuat Accordion FAQ Responsive

Agar tampilannya tetap optimal di semua perangkat, kamu perlu membuatnya responsive.

Pertama, gunakan ukuran fleksibel seperti % atau em. Selain itu, tambahkan media query untuk menyesuaikan tampilan di layar kecil.

@media (max-width: 600px) {
  .accordion-btn {
    font-size: 14px;
  }
}

Dengan begitu, accordion tetap nyaman digunakan di mobile.

Kesalahan yang Sering Terjadi

Meskipun terlihat sederhana, masih banyak yang melakukan kesalahan saat membuat accordion.

Pertama, struktur HTML sering tidak rapi. Akibatnya, developer kesulitan memahami struktur kode.
Selain itu, banyak developer membuat JavaScript terlalu kompleks, padahal bisa dibuat lebih sederhana.
Terakhir, mereka sering lupa mengoptimalkan tampilan responsive, sehingga UI kurang maksimal di HP.

Tips Biar Hasil Lebih Maksimal

Agar hasilnya lebih profesional, kamu bisa menambahkan animasi transisi. Misalnya, gunakan efek smooth saat membuka konten.

Selain itu, gunakan desain minimalis agar fokus tetap ke isi. Hindari warna yang terlalu mencolok. Terakhir, pastikan script tetap ringan. Dengan begitu, website tetap cepat saat diakses.

Kesimpulan

Cara membuat accordion HTML sebenarnya cukup sederhana jika kamu memahami struktur dasarnya. Dengan kombinasi HTML, CSS, dan JavaScript, kamu bisa membuat FAQ yang lebih rapi, interaktif, dan user-friendly.

Selain itu, penggunaan accordion juga membantu meningkatkan pengalaman pengguna. Jadi, jika kamu ingin membuat website terlihat lebih profesional, fitur ini wajib kamu coba.

FAQ

1. Apakah bisa membuat accordion tanpa JavaScript?

Bisa, namun fiturnya terbatas dan kurang interaktif.

2. Apakah accordion FAQ bagus untuk SEO?

Ya, karena membantu struktur konten dan meningkatkan UX.

3. Apakah accordion cocok untuk semua website?

Hampir semua website bisa menggunakan accordion, terutama untuk halaman FAQ.

Untuk referensi lebih lanjut, kamu bisa membaca dokumentasi resmi dari MDN tentang HTML, CSS, dan JavaScript. Selain itu, kamu juga bisa mencoba langsung membuat accordion di CodePen agar kamu lebih mudah memahami cara kerjanya.

Kalau kamu merasa website masih kurang optimal dari segi tampilan dan konten, sekarang saatnya upgrade dengan artikel SEO-friendly dan tema WordPress yang profesional.

Cek detail DISINI

Tagged with:

accordion faq html accordion html css accordion html css js accordion sederhana html css cara membuat accordion html faq accordion website tutorial accordion html

Berbagi wawasan dan tips praktis seputar dunia digital.

9 thoughts on “Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS”

Putri Marewa berkata:
27 April 2026 pukul 10:29 am
Artikel ini ngebantu banget, apalagi bagian JavaScript-nya dijelasin dengan simpel. Jadi lebih mudah paham cara kerja accordion 👍
Balas
- Farhan Hidayat berkata:
  27 April 2026 pukul 10:37 am
  Terima kasih ya! 🙌 Senang dengarnya. Memang bagian JavaScript sengaja dibuat simpel supaya lebih mudah dipahami. Kalau ada yang ingin kamu kembangkan lagi, feel free untuk eksplor ya 👍
  Balas
Raka Pratama berkata:
27 April 2026 pukul 10:30 am
Awalnya bingung bikin FAQ yang rapi, tapi setelah ikut tutorial ini langsung bisa. Ternyata cara membuat accordion HTML nggak sesulit yang dibayangin.
Balas
- Farhan Hidayat berkata:
  27 April 2026 pukul 10:38 am
  Terima kasih atas feedback-nya 🙏 Senang mengetahui tutorial ini bisa membantu kamu memahami cara membuat accordion HTML dengan lebih mudah.
  Balas
Dimas Saputra berkata:
27 April 2026 pukul 10:33 am
Penjelasannya enak dibaca dan nggak terlalu teknis, jadi pemula kayak saya masih bisa ngikutin. Ditunggu tutorial UI lainnya ka^^.
Balas
- Farhan Hidayat berkata:
  27 April 2026 pukul 10:39 am
  Terima kasih banyak 🙌 Senang banget kalau penjelasannya bisa mudah dipahami. Siap, nanti akan aku buatkan tutorial UI lainnya juga ya 👍
  Balas
Andi Kurniawan berkata:
27 April 2026 pukul 10:34 am
Mantap, akhirnya nemu tutorial accordion yang langsung bisa dipakai tanpa ribet. Kodenya juga ringan dan gampang dimodifikasi.
Balas
- Farhan Hidayat berkata:
  27 April 2026 pukul 10:40 am
  Terima kasih ya! 🙌 Senang dengarnya. Kamu juga bisa bebas modifikasi sesuai kebutuhan, misalnya tambah animasi atau styling biar makin keren 😄
  Balas
Farhan Hidayat berkata:
27 April 2026 pukul 10:39 am
Terima kasih ya! 🙌 Senang dengarnya. Desainnya memang dibuat simpel tapi tetap modern, jadi fleksibel dipakai untuk portfolio atau landing page 👍
Balas

Tinggalkan Balasan Batalkan balasan

Home
Articles
Search
Menu