Javascript Accordion Menu

Javascript Accordion Menu

Javascript Accordion Menu Tutorial with source code

Javascript Accordion Menu is used to organize questions and answers on various websites. Here you will find the source code for creating the Accordion section using javascript. 

Today you will learn how to create a simple Accordion Menu using JavaScript only. I have already shared with you how to create Accordion Bar using only HTML and CSS code.

The Accordion section is a remarkable element that is used almost all over the website. Basically, it is some basic questions and their answer section that the user asks. This type of design is used to organize information related to the services and products of different websites. The most important point is that all the text here is completely hidden. If the user wants to see, they can be seen.

Earlier I designed a faq where I used only HTML and CSS. I made it fully responsive so you can use it on any device. As you can see in the picture above, five menu items or questions have been used here. There is a lot more text under that heading that is hidden. Whenever you click on that heading or menu item, you will see all the tests in that item. When you click on it again, it will be hidden again.

See the Pen
Accordion Menu using Javascript by Foolish Developer (@fghty)
on CodePen.

 If you do not understand what I am saying then you can use the demo section below. Here you will find the required source code and live demo.

Javascript Accordion Menu Tutorial with source code

 Below I have shared the complete tutorial for you. Here I have shown the possible result image after each step. As you can see, I painted a web page in blue and there are five small boxes on it. I added one question in each box.

Step 1: Create the basic structure of accordion

Using below HTML and CSS code, I created the basic structure of Accordion. Here I have used blue as the background color of the web page and white as the text color.

<div class=”accordion”>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: ‘Montserrat’, sans-serif;
  background-color: #0f5086;
  color: #fff;
  margin-top: 100px;
}
.accordion {
  width: 90%;
  max-width: 1000px;
  margin: 2rem auto;
}
Create the basic structure of accordion

Step 2: Add headings in the bar  

First I added the headings of this Accordion menu bar. When we look at the section in general, we only see the headings or questions. I used white as the background color of that heading and black as the text color.

  <div class=”accordion-item”>
    <div class=”accordion-item-header”>
      Accordion Menu Using HTML
    </div>
        <!– accordion body –>
  </div>
.accordion-item {
  background-color: #fff;
  color: #111;
  margin: 1rem 0;
  border-radius: 0.3rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 0.5rem 3rem 0.5rem 1rem;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-weight: bold;
  display: flex;
  font-size: 17px;
  align-items: center;
  position: relative;
  cursor: pointer;
}
Add headings in the bar

Step 3: Add information about headings 

Now I have added the answer or text related to the question added above. This information will be hidden under normal circumstances. This information can be seen only when the user clicks on that question. 

Overflow: hidden has been used so that not all the information can be seen. Here the border image is used to create a border between the question and the answer.

    <div class=”accordion-item-body”>
      <div class=”accordion-item-body-content”>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus alias dolorum itaque incidunt amet animi explicabo facilis, voluptates, maxime repudiandae minus at, voluptatibus optio facere in obcaecati exercitationem, ab quod.
      </div>
    </div>
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
  line-height: 1.5rem;
  font-family: sans-serif;
  border-top: 1px solid;
  font-size: 16px;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
Add information about headings

Step 4: Add symbols with After Effects

Now I have created two symbols using the following CSS code. The plus sign minus is converted when you click on that question. I have taken the help of CSS code here to make these two symbols. 

First I use the after effect I added the plus sign. Then by adding active I used the minus sign which means a subtraction mark will appear when you click on the question.

.accordion-item-header::after {
  content: “\002B”;
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: “\2212”;
}
Add symbols with After Effects
@media(max-width:767px) {
  html {
    font-size: 14px;
  }
}

Step 5: Add more faq sections 

Now I have added four more sections in the same way. Where I added one question at a time and added related answers. Here you can increase or decrease the number of sections as per your requirement.

  <div class=”accordion-item”>
    <div class=”accordion-item-header”>
      Accordion Using Pure CSS
    </div>
    <div class=”accordion-item-body”>
      <div class=”accordion-item-body-content”>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellat maiores veritatis et, dicta necessitatibus quas illo commodi libero!<br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae sequi a fugit totam tempore,  aspernatur.
      </div>
    </div>
  </div>
  <div class=”accordion-item”>
    <div class=”accordion-item-header”>
      Accordion Bar With Jquery
    </div>
    <div class=”accordion-item-body”>
      <div class=”accordion-item-body-content”>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error alias, incidunt dolor aperiam soluta aspernatur tenetur eaque, iusto consequuntur sit nam labore id suscipit. Soluta quos, molestias cum ab laborum odit quaerat quibusdam.
      </div>
    </div>
  </div>
  <div class=”accordion-item”>
    <div class=”accordion-item-header”>
      Accordion Bar using Bootstrap 5
    </div>
    <div class=”accordion-item-body”>
      <div class=”accordion-item-body-content”>
        CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
      </div>
    </div>
  </div>
Add more faq sections

Step 6: Activate the Accordion section using JavaScript

We have designed everything above. Now we will implement this Accordion Menu using JavaScript.

First I set a constant of accordion-item-header. We know that under normal circumstances no ID or class function can be used directly in JavaScript. So here I have determined a constant.

const accordionItemHeaders = document.querySelectorAll(“.accordion-item-header”);

Now I have implemented this design using JavaScript below. Hope you know basic JavaScript and understand this code structure.

 accordionItemHeaders.forEach(accordionItemHeader => {
 accordionItemHeader.addEventListener(“click”, event => {
    accordionItemHeader.classList.toggle(“active”);
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains(“active”)) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + “px”;
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
  });
});
Javascript Accordion Menu

  Hopefully from the above tutorial, you have learned how to create this Javascript Accordion Menu. In the meantime, I have designed many more types of faq sections. You can see the designs if you like this article.

",t.style.display="none")},1e3)}