In this article, you'll Learn how to create an accordion menu using HTML, CSS, and JavaScript. This tutorial covers the basic markup to the advanced JavaScript code. With this guide, you'll be able to create a beautiful and functional accordion menu.
You may have seen accordion menu (frequently ask question section) in website that have question, which is frequently asked by their users. and when you click in that question the answer will show up. See the below image that when click on second question the answer or description appears.
Video Tutorial of Accordion Menu In HTML CSS and JavaScript:
Accordion Menu
So I have created two files with index.html and index.css. Then linked the css file with html. And also I have used javascript in this menu, So I have added it within the html file in script tag below closing body tag.
Below are the steps to make accordion menu.
Step 1: Create basic html structure and add question.
So first, I have added background (container class) which is plain background white colour. In centre of it, we going to add questions and answers. This question and answer wrapped in one div (box class) See the below code.
So, let's first add questions.
For question I have added div tag with label_box class in which H1 tag and span tag is added.
- label_box is for questions.
- H1 tag is for title question.
- Span tag is for plus sign. When user click on label_box, plus sign change to minus sign. Also added two div tags in it to form plus sign (You can use image also).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
body{
width: 100%;
height: 100vh;
position: relative;
}
.container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 450px;
}
.box{
width: 100%;
background-color: blue;
color: #fff;
margin-bottom: 12px;
}
.box .label_box{
display: flex;
align-items: center;
}
.label_box h1{
font-size: 35px;
width: 90%;
font-weight: bold;
padding: 10px;
cursor: pointer;
}
.label_box span{
position: relative;
}
.label_box span .line1{
width: 3px;
height: 16px;
background-color: #fff;
transition: 0.3s;
}
.label_box span .line2{
width: 3px;
height: 16px;
background-color: #fff;
position: absolute;
top: 0px;
rotate: 90deg;
transition: 0.3s;
}
Output :
As you can see above image, the question design is ready. Now let's added description or answer, below to question.
Step 2: Add answer below the question.
So, I have added p tag with class description. below label_box class, which is created above.
HTML
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
CSS
.box .description{
padding: 12px;
font-size: 20px;
background-color: #fcfcfc;
color: #000;
transition: 0.2s;
}
Output :
Now the menu is ready, Let's hide the answer.
Step 3: Hide answer or description initially.
So, to hide the answer or description, I have added heigh:0px, overflow: hidden, padding: 0px to description.
CSS
.box .description{
padding: 0px;
height: 0px;
overflow: hidden;
font-size: 20px;
background-color: #fcfcfc;
color: #000;
transition: 0.2s;
}
Output :
Step 4: Now let's add more questions and answers.
To add more question and answer, I have simply just copied and paste the whole box class div. You can see the below code. three more Q & A added.
HTML
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
<br>
<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
<br>
<br>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
<div class="box">
<div class="label_box">
<h1>Title</h1>
<span><div class="line1"></div><div class="line2"></div></span>
</div>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit totam quaerat, magnam, expedita repellendus odio necessitatibus soluta ducimus unde perferendis et aliquid ullam inventore dolorum veniam placeat eligendi! Magni, maiores.
</p>
</div>
Output :
As you can see the above image, I have added three more questions and answers. Answers are not visible because we hide it in step 3.
Step 5: Add JavaScript to open answer when user click on questions.
Now to open answer (description class) when click on question (label_box class). I used foreach method. because there are same classes for each question and answer. So, with foreach method we can target each class. See below JavaScript.
So, what will it do is, it set description height: 0px; when page loads. And when user click on question (label_box class), it checks whether description height is 0 or not.
If it is 0px, then if part will run, that make plus sign to minus sign by rotating 90deg, description height will be set to it scrollheight (because some descriptions are long some are short). and padding:12px (which above set to 0px).
If description height is not 0px. then else part will run. that make minus sign to plus sign and description height and padding set to 0px.
JavaScript
let box = document.querySelectorAll(".box");
box.forEach((item , index) => {
let description = item.querySelector(".description");
let label_box = item.querySelector(".label_box");
let line1 = item.querySelector(".line1");
let line2 = item.querySelector(".line2");
description.style.height = "0px";
label_box.onclick = function(){
if (description.style.height == "0px") {
line1.style.rotate = "90deg";
line2.style.rotate = "90deg";
description.style.height = description.scrollHeight + "px";
description.style.padding = "12px";
}else{
line1.style.rotate = "0deg";
line2.style.rotate = "90deg";
description.style.height = "0px";
description.style.padding = "0px";
}
}
});
Output :
As you can see above image, that when click on question, description shows and plus sign change to minus sign. So that's how you can make accordion menu.
You may like:
- How to create a simple sidebar menu using HTML and CSS with open and close functionality.
- How to create a responsive navigation menu using HTML CSS and JavaScript.
- How to create a navigation bar with search bar using HTML CSS and JavaScript.
- How to create a custom select menu using HTML, CSS and JavaScript.
Final code :
So that's how you can make accordion menu using html css and javascript. If you have any question or suggestion you can write in comment section.
Share your thoughts.