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";
}
});
}