Accordion Menu with JavaScript and jQuery

How to make use of it:

1. Create the HTML (button for accordion headers, HTML checklist for accordion gadgets) for the accordion menu.

<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>
  <li class="accordion-item">Accordion Item 14</li>
  <li class="accordion-item">Accordion Item 15</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>
  <li class="accordion-item">Accordion Item 24</li>
  <li class="accordion-item">Accordion Item 25</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>
  <li class="accordion-item">Accordion Item 34</li>
  <li class="accordion-item">Accordion Item 35</li>
</ul>

2. The instance CSS for the accordion menu. Feel free to override the next types to suit 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 utilizing Vanilla JavaScript.

"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 utilizing jQuery (use jQuery’s slideToggle method for the toggle behavior).

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

Minimal Accordion Menu, Accordion menu with JavaScript and jQuery, accordion jquery plugin free download, css accordion menu with submenu

See Demo And Download