JavaScript Accordion Menu

This JavaScript code helps you to create an accordion menu. It selects all the elements with the class accordion and stores them in the acc variable using document.querySelectorAll() and then loops through the acc collection and adds a click event listener to each element. When an element is clicked, the function inside the event listener toggles the active class of the clicked element using classList.toggle() and It also selects the next sibling element of the clicked element using nextElementSibling and checks if its maxHeight property is defined.

If it sets maxHeight to null to collapse the panel. If not, it sets maxHeight to the height of the panel using scrollHeight property to expand the panel. This code allows the user to toggle the display of the panel associated with each accordion element when clicked.

How to Create JavaScript Accordion Menu

Create the HTML structure for the accordion menu as follows:

<div class="container">
  <button class="accordion">Profile</button>
  <div class="accordion-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>

  <button class="accordion">Messages</button>
  <div class="accordion-content">
    <ul>
      <li>Inbox</li>
      <li>Sent</li>
      <li>Drafts</li>
    </ul>
  </div>

  <button class="accordion">Settings</button>
  <div class="accordion-content">
    <ul>
      <li>Profile</li>
      <li>Privacy & Safety</li>
      <li>Notifications</li>
    </ul>
  </div>

  <button class="accordion">Log out</button>
</div>

Now, style the accordion menu using the following CSS styles:

@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: rgb(192, 48, 77);
  background: linear-gradient(
    174deg,
    rgba(192, 48, 77, 1) 0%,
    rgba(158, 37, 61, 1) 100%
  );
  font-family: "Ubuntu", sans-serif;
}

.container {
  width: 100%;
  max-width: 25rem;
  padding: 2rem;
  margin: 3rem auto;
  background: hsl(0, 0%, 14%);
  border-radius: 1rem;
  border: 1px solid #222;
  box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.55);
}

.accordion {
  background-color: #333;
  color: #eee;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border: 1px solid #222;
  text-align: left;
  outline: none;
  font-size: 1rem;
  transition: all 0.4s ease-out;
  box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
}

.accordion:first-child {
  border-radius: 1rem 1rem 0 0;
}

.accordion:nth-last-child(1) {
  border-radius: 0 0 1rem 1rem;
}

.accordion:nth-last-child(1):hover {
  background: crimson;
}

.active,
.accordion:hover {
  background-color: #426ef0;
}

.accordion:after {
  content: "\002B";
  color: #eee;
  font-weight: bold;
  float: right;
  margin-left: 0.5rem;
}

.active:after {
  content: "\2212";
}

.accordion-content {
  padding: 0 1rem;
  background-color: #222;
  color: #aaa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-content ul {
  list-style-type: circle;
  margin: 1rem 0;
  padding: 0.2rem;
}

.accordion-content ul li {
  padding: 0.2rem 0;
}

Finally, add the following JavaScript function for its functionality:

let acc = document.querySelectorAll(".accordion");
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function () {
    this.classList.toggle("active");
    let panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

That’s all! hopefully, you have successfully created the JavaScript accordion menu. If you have any questions or suggestions, feel free to comment below.