Minimal Accordion Menu In jQuery & Vanilla JavaScript

This project demonstrates how to create a minimal-looking vertical accordion menu using jQuery or Vanilla JavaScript.

How to use it:

1. Create the HTML (button for accordion headers, HTML list for accordion items) for the accordion menu.

<!-- jQuery Version -->
<button class="accordion-btn">
  Accordion 1
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul class="accordion-list">
  <li class="accordion-item">Accordion Item 11</li>
  <li class="accordion-item">Accordion Item 12</li>
  <li class="accordion-item">Accordion Item 13</li>
</ul>
<button class="accordion-btn">
  Accordion 2
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul class="accordion-list">
  <li class="accordion-item">Accordion Item 21</li>
  <li class="accordion-item">Accordion Item 22</li>
  <li class="accordion-item">Accordion Item 23</li>
</ul>
<button class="accordion-btn">
  Accordion 3
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul class="accordion-list">
  <li class="accordion-item">Accordion Item 31</li>
  <li class="accordion-item">Accordion Item 32</li>
  <li class="accordion-item">Accordion Item 33</li>
</ul>

<!-- Vanilla JavaScript Version -->
<button data-id="js-button1" class="accordion-btn">
  Accordion 1
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul id="js-button1" class="accordion-list-js">
  <li class="accordion-item">Accordion Item 11</li>
  <li class="accordion-item">Accordion Item 12</li>
  <li class="accordion-item">Accordion Item 13</li>
</ul>
<button data-id="js-button2" class="accordion-btn">
  Accordion 2
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul id="js-button2" class="accordion-list-js">
  <li class="accordion-item">Accordion Item 21</li>
  <li class="accordion-item">Accordion Item 22</li>
  <li class="accordion-item">Accordion Item 23</li>
</ul>
<button data-id="js-button3" class="accordion-btn">
  Accordion 3
  <span class="accordion-line"></span>
  <span class="accordion-line"></span>
</button>
<ul id="js-button3" class="accordion-list-js">
  <li class="accordion-item">Accordion Item 31</li>
  <li class="accordion-item">Accordion Item 32</li>
  <li class="accordion-item">Accordion Item 33</li>
</ul>

2. The example CSS for the accordion menu. Feel free to override the following styles to fit your design.

.accordion-btn {
  width: 100%;
  text-align: left;
  color: #ffffff;
  background: #000000;
  padding: 15px 25px;
  border-bottom: 1px solid #ffffff;
}

.accordion-list,
.accordion-list-js {
  background: #f7f7f7;
  color: #333333;
}

.accordion-list {
  display: none;
}

/* required for Vanilla JS Version */
.accordion-list-js {
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.5s;
}

/* required for Vanilla JS Version */
.accordion-list-js.open {
  height: 275px;
  opacity: 1;
  visibility: visible;
}

.accordion-item {
  padding: 15px 25px;
  border-bottom: 1px solid #afaeae;
}

3. Activate the accordion menu using Vanilla JavaScript (use CSS animations for the toggle behavior).

"use strict";

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

accordionBtn.forEach((clickBtn) => {
  clickBtn.addEventListener("click", () => {
    document.getElementById(clickBtn.dataset.id).classList.toggle("open");
  });
});

4. Activate the accordion menu using jQuery (use jQuery's slideToggle method for the toggle behavior).

$(function () {
  $(".accordion-btn").on("click", function () {
    $(this).next(".accordion-list").slideToggle();
  });
});

---

This awesome jQuery plugin is developed by ryu0947. For more Advanced Usages, please check the demo page or visit the official website.