JavaScript Accordion panel

Accordion panel design with JavaScript

You can use this simple accordion because it is built with pure javascript/vanilla javascript. It’s very lightweight and responsive and this coding structure won’t interrupt your site design. It’s easy to use and developer friendly coding structure.

HTML5 | CSS3 | JavaScript

Version: 1.0.0

Accordion label

Accordion text

Accordion label

Accordion text

Accordion label

Accordion text

Accordion label

Accordion text

Accordion label

Accordion text

Code

<div class="bnAccordionWrapper">
    <div class="bnAccordion">
        <div class="bnAccordionBtn">Accordion label</div>
        <div class="bnAccordionPanel"><p>Accordion text</p></div>
    </div>

    <div class="bnAccordion">
        <div class="bnAccordionBtn">Accordion label</div>
        <div class="bnAccordionPanel"><p>Accordion text</p></div>
    </div>

    <div class="bnAccordion">
        <div class="bnAccordionBtn">Accordion label</div>
        <div class="bnAccordionPanel"><p>Accordion text</p></div>
    </div>

    <div class="bnAccordion">
        <div class="bnAccordionBtn">Accordion label</div>
        <div class="bnAccordionPanel"><p>Accordion text</p></div>
    </div>

    <div class="bnAccordion">
        <div class="bnAccordionBtn">Accordion label</div>
        <div class="bnAccordionPanel"><p>Accordion text</p></div>
    </div>
</div>

.bnAccordionWrapper {
    display: block;
    width: 100%;
    position: relative;
    max-width: 800px;
    margin: 20px auto;
}
.bnAccordion {
    margin-bottom: 5px;
}
.bnAccordionBtn {
    display: block;
    position: relative;
    padding: 5px 10px;
    background: #5ed5e4;
    border-radius: 3px;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: all .3s;
}
.bnAccordionBtn.bnActive {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    transition: all .3s;
    border-bottom: 1px solid #ffffff45;
}
.bnAccordionBtn:after {
    content: '\002B';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 18px;
    transition: .3s;
    transform: rotate(0deg);
}
.bnAccordionBtn.bnActive:after {
    content: '\2212';
    transition: .3s;
    transform: rotate(0deg);
}
.bnAccordionPanel {
    margin: 0;
    padding: 0 10px;
    background-color: #5ed5e4;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.bnAccordionPanel p {
    margin: 0;
    padding: 5px 0;
}

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