In this post, we will learn how to create accordion in html. With the help of accordion, we can hide and show a large amount of content in just one click.


How To Create An Accordion in HTML ?


Create An Accordion

Accordion Example:

Accordion Body 1

Accordion Body 2

Accordion Body 3


To create an accordion in HTML, we follow the following steps:

Step (1) : In this step, we write HTML code as follows:

<div class="accordion-box">
<button class="accordionItem">Accordion Item 1</button>
<div class="accordionBody">
<p>Accordion Body 1</p>
</div>

<button class="accordionItem">Accordion Item 2</button>
<div class="accordionBody">
<p>Accordion Body 2</p>
</div>

<button class="accordionItem">Accordion Item 3</button>
<div class="accordionBody">
<p>Accordion Body 3</p>
</div>
</div> code-box

Step (2) : Now write CSS code in the following step:
  • First let us write the CSS code of accordionItem.
  • Then write CSS of accordionBody and keep its max-height value zero so that it is not visible. We will show and hide this later via JavaScript.
  • To have the icon show at the end of each accordion item, we will write the CSS of accordionItem: after and get the (+) sign show done. When the accordion item is active then the (-) sign show by active: after.
  • Write the code \002B for the (+) sign and \2212 for the (-) sign.
.accordionItem {
background-color: #555;
color: #fff;
cursor: pointer;
padding: 16px;
width: 100%;
text-align: left;
border: none;
outline: none;
border-bottom: 1px solid black;
transition: 0.5s;
}
.active, .accordionItem:hover {
background-color: #222;
}
.accordionBody {
padding: 0 16px;
background-color:white;
overflow:hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.accordionItem:after {
content: '\002B'; /* (+) Sign */
font-size: 16px;
color: #fff;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212"; /* (-) Sign */
} code-box

Step (3) :  In this step, we write the JavaScript code in the following step:
  • First let us create a variable named accItem and store all the accordion item containing accordionItem class in this variable.
  • Then create click event function on all accordion items with the help of for loop.
  • Next, toggle the active class by classList.toggle().
  • Then store the next element of the accordion item by nextElementSibling in a variable named accBody.
  • Then hide and show the accordion body with animations via if-else.
var i;
var accItem = document.getElementsByClassName("accordionItem");

for(i=0; i<accItem.length; i++) {
accItem[i].addEventListener("click", function() {
this.classList.toggle("active");

var accBody = this.nextElementSibling;
if(accBody.style.maxHeight) {
accBody.style.maxHeight = null;
} else {
accBody.style.maxHeight = accBody.scrollHeight + "px";
}
});
} code-box

Summary

In this post we learn how to create an accordion in HTML. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post