Membuat Accordion dengan jQuery

Membuat Accordion dengan jQuery

—

by

Webbiz.ID
in

Berikut adalah contoh kode untuk membuat accordion dengan menggunakan jQuery.

See the Pen Membuat Accordion dengan jQuery by WebbizID (@De-Orchids) on CodePen.

HTML
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <style>
    .accordion {
      margin-bottom: 10px;
    }
    .accordion h3 {
      cursor: pointer;
      margin: 0;
      padding: 10px;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .accordion .content {
      display: none;
      padding: 10px;
      border: 1px solid #ddd;
      border-top: none;
      border-radius: 4px;
    }
  </style>
  <script>
    $(document).ready(function() {
      $(".accordion h3").click(function() {
        $(this).next(".content").slideToggle();
      });
    });
  </script>
</head>
<body>
  <div class="accordion">
    <h3>Section 1</h3>
    <div class="content">
      <p>Content for section 1.</p>
    </div>
  </div>
  <div class="accordion">
    <h3>Section 2</h3>
    <div class="content">
      <p>Content for section 2.</p>
    </div>
  </div>
  <div class="accordion">
    <h3>Section 3</h3>
    <div class="content">
      <p>Content for section 3.</p>
    </div>
  </div>
</body>
</html>
HTML

Anda dapat menyalin kode di atas ke dalam file HTML dan membukanya di browser untuk melihat hasilnya. Accordion ini akan memiliki beberapa bagian yang dapat diklik untuk membuka dan menutup kontennya.

Pastikan Anda telah menyertakan jQuery dan jQuery UI library dengan menggunakan tautan yang diberikan di kode di atas. Selain itu, Anda juga dapat menyesuaikan tampilan accordion dengan mengubah CSS yang ada.

Tutorial lainnya:

Semoga contoh kode di atas bermanfaat bagi Anda dalam membuat accordion menggunakan jQuery dan UI dari jQuery library.

Artikel Terbaru ⭐