cara membuat accordion html Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/cara-membuat-accordion-html/ Mon, 27 Apr 2026 10:20:43 +0000 id hourly 1 https://wordpress.org/?v=7.0 https://farhanhidayat.com/wp-content/uploads/2024/11/cropped-Favicon-Farhanhidayat-32x32.png cara membuat accordion html Arsip - Farhanhidayat.com https://farhanhidayat.com/tag/cara-membuat-accordion-html/ 32 32 Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS https://farhanhidayat.com/cara-membuat-accordion-html/ https://farhanhidayat.com/cara-membuat-accordion-html/#comments Mon, 27 Apr 2026 10:20:43 +0000 https://farhanhidayat.com/?p=2481 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. […]

Artikel Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS pertama kali tampil pada Farhanhidayat.com.

]]> 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.

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.

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.

.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.

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.

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

Artikel Cara Membuat Accordion FAQ Simple dengan HTML, CSS & JS pertama kali tampil pada Farhanhidayat.com.

]]> https://farhanhidayat.com/cara-membuat-accordion-html/feed/ 9