JavaScript Accordion Menu

This JavaScript code snippet helps you to create an accordion menu. It sets up an accordion interface where a user can click on a heading to toggle the visibility of its associated content. The script first selects all elements with the class “accordionItem” and “accordionItemHeading” using the getElementsByClassName() method. It then loops through all the “accordionItemHeading” elements and adds a click event listener to each one that triggers the toggleItem() function when clicked.

The toggleItem() function starts by getting the class name of the parent node of the clicked heading element. It then loops through all the “accordionItem” elements and sets their class names to “accordionItem close” to close all the items. Finally, if the clicked item’s class name is “accordionItem close”, the function sets the class name of the clicked item’s parent to “accordionItem open” to open the item.

How to Create JavaScript Accordion Menu

Create the HTML structure for the accordion menu as follows:

<div class="accordionWrapper">
  <div class="accordionItem open">
   <h2 class="accordionItemHeading">Accordions Menu HTML CSS <span>+</span></h2>

    <div class="accordionItemContent">
       <p>This simple accordion degrades gracefully in browsers that don't support JavaScript or CSS.</p>
    </div>

</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Javascript  <span>+</span></h2>

    <div class="accordionItemContent">
       <p>A JavaScript accordion is made up of a number of expandable/collapsible items. Only one item is ever shown at a time.</p>
    </div>
</div>

<div class="accordionItem close">
   <h2 class="accordionItemHeading">Accordion Menu Jquery <span>+</span></h2>

    <div class="accordionItemContent">
       <p>Click an accordion item's heading to expand it. To collapse the item, click it again, or click another item heading.</p>
    </div>
</div>

</div>

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

body{

  background: #16bbce;

  }

.accordionWrapper{
  padding:30px;
  background:#fff;
  float:left;
  width:500px;
  border-radius: 5px;
  box-sizing:border-box;
  margin:10%;
  box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);}

.accordionItem{
    float:left;
    display:block;
    width:100%;
    box-sizing: border-box;
    font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
    cursor:pointer;
    margin:0px 0px 10px 0px;
    padding:10px;
    font-size: 22px;
    font-weight: 400;
    background:#2980b9;
    color:#fff;
    width:100%;
    border-radius: 3px;
    box-sizing: border-box;
}
.accordionItemHeading span{
  float: right;
  font-size: 25px;
}

.close .accordionItemContent{
    height:0px;
    transition:height 1s ease-out;
    transform: scaleY(0);
    float:left;
    display:block;


}

.open .accordionItemContent{
    padding: 20px;
    background-color: #f0f1f1;
    border: 1px solid #ddd;
    width: 100%;
    margin: 0px 0px 10px 0px;
    display:block;
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.4s ease;
    box-sizing: border-box;
}

.open .accordionItemHeading{
    margin:0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #073e63;
    color: #cdd7d8;
}

Finally, add the following JavaScript function for its functionality:

var accItem = document.getElementsByClassName('accordionItem');
    var accHD = document.getElementsByClassName('accordionItemHeading');

for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionItem close';
        }
        if (itemClass == 'accordionItem close') {
            this.parentNode.className = 'accordionItem open';
        }
    }

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