How to Create simple Accordion using JavaScript

Accordion is an expandable and collapsible container which used to manage related data. It consumes less space and shows content in a user-friendly format.

There are already lots of jQuery plugins for implementing this, like – jQuery UI, Bootstrap, accordion.js, etc.

In this tutorial, I show how you can create accordion using JavaScript.

---

Contents

1. HTML – Create Accordion layout
2. CSS
3. JavaScript
4. Demo
5. Conclusion

---

1. HTML – Create Accordion layout

• First create <div class="accordion"> to hold accordion data.
• Accordion section consists of 2 <div> elements –
  • 1st is used for the heading section. Add accordion-headsection class to <div >, and
  • 2nd is used to store content. Specify a unique id and add accordion-content and hide-content classes.
• I have added 4 accordion sections.

NOTE – If you want to already open an accordion on page load then remove hide-content class and add show-content class to it and add active class to accordion head.

Completed Code

<!-- Accordion (start) -->
<div class="accordion">
      <!-- Accordion section 1 -->
     <div class="accordion-headsection">Heading 1</div>
     <div id="accordioncontent_1" class="accordion-content hide-content">
           Content 1
     </div>

     <!-- Accordion section 2 -->
     <div class="accordion-headsection">Heading 2</div>
     <div id="accordioncontent_2" class="accordion-content hide-content">
           Content 2
     </div>

     <!-- Accordion section 3 -->
     <div class="accordion-headsection">Heading 3</div>
     <div id="accordioncontent_3" class="accordion-content hide-content">
           Content 3
     </div>

     <!-- Accordion section 4 -->
     <div class="accordion-headsection">Heading 4</div>
     <div id="accordioncontent_4" class="accordion-content hide-content">
           Content 4
     </div>
</div>
<!-- Accordion (end) -->

---

2. CSS

.accordion{
     width:70%;
     margin:0 auto;
}

/* accord ion heading */
.accordion .accordion-headsection{
     font-size:20px;
     margin-bottom:3px;
     margin-top:0px;
     background-color:#F2F3F4;
     padding: 10px;
     border-radius:5px;
}
.accordion .accordion-headsection:hover{
     cursor:pointer;
     background: #D7DBDD;
}

/* accordion section content */
.accordion .accordion-content{
     padding:10px;
     height:150px;
     line-height:20px;
     border:1px solid gray;
     border-radius:3px;
}

.accordion .active{
     background: #D7DBDD;
}

.hide-content{
     display: none;
}
.show-content{
     display: block !important;
}

---

3. JavaScript

• Create a autoclose variable to control accordion auto-closing when another accordion gets clicked.
• Read all <div > that has class accordion-headsection and loop on it to add click event. When <div > gets clicked then it calls accordionFun() function.

Create accordionFun() function –

• Assign clicked element instance to el variable.
• Read next element and its id and assign it to the variables.
• Check if autoclose is true or false.
• If true then loop on all <div > that has class accordion-content. If <div > id is not equal to content_id then remove show-content class and add hide-content class. Also, remove active class from the accordion head.
• If contentEl has hide-content class then remove hide-content class and add show-content class. Add active class to accordion head.
• It it not has hide-content class then remove show-content class and add hide-content class. Also, remove active class from the accordion head.

Completed Code

var autoclose = true; // Close open accordion when another accordion is clicked

// Add click event to accordion heading 
var elements = document.getElementsByClassName("accordion-headsection");

for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener('click', accordionFun, false);
}

function accordionFun(evt) {

      // clicked element
      var el = evt.currentTarget;

      // Read clicked accordion head content section
      var contentEl = el.nextElementSibling;
      var content_id = contentEl.getAttribute('id');

      // Auto close other opened accordion if autoclose=true
      if(autoclose){

           // Read all elements that has class - accordion-content
           var elements = document.getElementsByClassName("accordion-content");
           for (var i = 0; i < elements.length; i++) {
                if(elements[i].getAttribute('id') != content_id){

                     // Add/Remove class from accordion content
                     elements[i].classList.remove('show-content');
                     elements[i].classList.add('hide-content');

                     // Remove active class from accordion head
                     elements[i].previousElementSibling.classList.remove("active");
                } 
           }
      }

      // Toggle clicked accordion classes
      if(contentEl.classList.contains('hide-content')){

           // Add/Remove class from accordion content
           contentEl.classList.remove('hide-content');
           contentEl.classList.add('show-content');

           // Add active class to clicked accordion head
           el.classList.add("active");
      }else{

           // Add/Remove class from accordion content
           contentEl.classList.remove('show-content');
           contentEl.classList.add('hide-content');

           // Remove active class from clicked accordion head
           el.classList.remove("active");
      }

}

---

4. Demo

View Demo

---

5. Conclusion

If you are already displaying a group of data on your page then you can replace it with an accordion to make content more accessible to users.

If you found this tutorial helpful then don't forget to share.