How to create a simple accordion with JavaScript vanilla

An accordion is used to toggle between content. You can use an accordion to toggle between displaying a large chunk of content and a smaller one.

An example of an accordion is the section you see on a Google search results page, as shown below:

In the image above, the content is summed up to a simple title. Clicking on the arrow symbol shows more content of that particular result.

How to create an accordion

The following steps demonstrate how you can add an accordion feature to your website.

Step 1

Create an HTML file to render, similar to the one shown below.

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <body>
 <h2>Accordion</h2>
<button class="accordion">Travel $ Tour</button>
<div class="panel">
  <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">Health $ Wellness</button>
<div class="panel">
  <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">Politics $ Economy</button>
<div class="panel">
  <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>
</body>
</html>

In the HTML code above, the markup for the accordion is created by giving the <button> element the accordion class name that will be targeted by the JavaScript code. The <div> with class name panel contains our large chunk of content, which will be hidden with our CSS styles.

Step 2

Add CSS styles to style the HTML code, as shown below.

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc; 
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

This CSS style will cause the HTML element with class name accordion to change from looking like this:

To something like this:

The CSS style will also hide a large chunk of data that we want to show after any of the section’s buttons are clicked. The ability to show the hidden contents will be implemented by the JavaScript code below.

Step 3

In this step, we add the JavaScript code to provide the toggle functionality.

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

In the JavaScript code above, we target the HTML element with the class name accordion. We start a counter var i with which all elements with the accordion class name will be looped through. When the element is clicked, the indicated function in the code will be executed.

This function in the code will toggle the style amongst the HTML elements, which causes the accordion effect to take place. This effect will cause the <p> tag block of code that contains the formerly hidden extra information to be displayed for the active element.

You can now combine the codes shown so far to form a simple accordion that you can embed in your webpage, as shown below.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
.active, .accordion:hover {
  background-color: #ccc; 
}
.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
</style>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Travel $ Tour</button>
<div class="panel">
  <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">Health $ Wellness</button>
<div class="panel">
  <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">Politics $ Economy</button>
<div class="panel">
  <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>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>
</body>
</html>

When this code is executed by your browser, you should get something like this upon clicking the buttons.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)