Creating an accordion using HTML, CSS and JavaScript is very simple way to keep extra information and ideas without any unnecessary space. Accordion doesn’t show all the information at once, it provides information according to the title given in each section, which the user can open and read. In this tutorial, you’ll learn How to create an accordion using HTML, CSS and JavaScript
Create an accordion with HTML, CSS and JavaScript
step 1 : HTML Structure
This HTML code creates the basic structure of an accordion. Each accordion item has two main parts — a label (the question) and a content section (the answer). When the user clicks a label, the content under it will open or close using JavaScript.
<div class="accodian">
<div class="contectBox">
<div class="label">Question 1</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fuga excepturi alias doloremque omnis repellat recusandae obcaecati velit qui! Necessitatibus esse sed doloremque dolores mollitia exercitationem natus? Sunt reprehenderit nesciunt voluptate, doloribus magni architecto culpa harum quisquam quam sed quia repellat. Unde, dolorem corporis accusantium ab dignissimos saepe eaque necessitatibus.</p>
</div>
</div>
<div class="contectBox">
<div class="label">Question 2</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fuga excepturi alias doloremque omnis repellat recusandae obcaecati velit qui! Necessitatibus esse sed doloremque dolores mollitia exercitationem natus? Sunt reprehenderit nesciunt voluptate, doloribus magni architecto culpa harum quisquam quam sed quia repellat. Unde, dolorem corporis accusantium ab dignissimos saepe eaque necessitatibus.</p>
</div>
</div>
<div class="contectBox">
<div class="label">Question 3</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel fuga excepturi alias doloremque omnis repellat recusandae obcaecati velit qui! Necessitatibus esse sed doloremque dolores mollitia exercitationem natus? Sunt reprehenderit nesciunt voluptate, doloribus magni architecto culpa harum quisquam quam sed quia repellat. Unde, dolorem corporis accusantium ab dignissimos saepe eaque necessitatibus.</p>
</div>
</div>
</div>
<!-- External JavaScript -->
<script src="index.js"></script>
step 2 : CSS Styling
In this CSS section, we style the accordion. Each accordion box gets its own width, height, and font styling using Google Fonts. We also design the .add class, which is applied when the user clicks on a label to open the accordion.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Outfit", sans-serif;
}
body{
display: flex;
justify-content:center;
width: 100%;
min-height: 100vh;
}
.accodian{
max-width: 700px;
}
.accodian .contectBox{
position: relative;
margin: 10px 20px;
}
.accodian .contectBox .label{
position: relative;
padding: 10px;
background-color: black;
color: white;
}
.accodian .contectBox .label::before{
content: '+';
position: absolute;
right: 20px;
}
.accodian .contectBox.add .label::before{
content: '-';
}
.accodian .contectBox .content{
position: relative;
background-color: black;
color: #e2e2e2;
height: 0;
overflow: hidden;
transition: 0.3s;
}
.accodian .contectBox.add .content{
height: auto;
padding: 15px;
}
step 3 : JavaScript Functions
In this JavaScript section, we create a function that runs when the user clicks any accordion item. It adds or removes the “add” class from the selected contentBox, working like a toggle because we are using the classList.toggle() method.
let accodian = document.querySelectorAll(".contectBox");
for(i = 0; i<accodian.length; i++){
accodian[i].addEventListener("click", function(){
this.classList.toggle("add")
});
}
Conclusion
Creating an simple accordion using HTML, CSS and JavaScript is a quick and right way to organize largest content without making any extra page. By combining a simple HTML layout, some CSS styling, and a small JavaScript toggle function, you can build any kind of accordion for any website. Now that you know the complete process, you can customize the design, add animations, or use this method to create multiple accordions on any page.