How to create Accordion in HTML CSS and JAVASCRIPT | How to create faq with html css and javascript
Accordion Template with Free Source Code
Output
HTML code
<!DOCTYPE html>
<html>
<head>
<title> Accordian </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center><h1>Accordian</h1></center>
<div class="accordian-container">
<div class="accordian-box">
<button class="accordian ">
<span class="number"> 1) </span>
What is HTML ?
</button>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</div>
</div>
<div class="accordian-box">
<button class="accordian">
<span class="number"> 2) </span>
What is CSS ?
</button>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</div>
</div>
<div class="accordian-box">
<button class="accordian">
<span class="number"> 3) </span>
What is JAVASCRIPT ?
</button>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</div>
</div>
<div class="accordian-box">
<button class="accordian">
<span class="number"> 4) </span>
What is PHP ?
</button>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS code
body{
padding: 0;
margin: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
background-color: #f5f0f2;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-direction: column;
}
.accordian-container{
width: 750px;
margin: auto;
border:1px solid black ;
box-shadow: 0 0 9px black;
padding: 15px;
}
.accordian-box{
width: 100%;
}
.accordian{
width: 100%;
text-align: left;
background-color: transparent;
border:1px solid crimson;
padding: 2px 5px ;
margin: 10px 1px;
font-size: 1.7rem;
transition: 400ms ease-in-out;
}
.accordian:hover{
background-color: crimson;
color: white;
cursor: pointer;
}
.active{
background-color: crimson;
color: white;
}
.number{
color:crimson;
}
.answer{
margin-bottom: 15px;
margin-top: 15px;
background-color: white;
border-left: 5px solid crimson;
padding: 2px 20px;
display: none;
}
Javascript code
var ques= document.getElementsByClassName("accordian");
var i ;
for( i=0;i<ques.length;i++){
ques[i].addEventListener("click", function(){
this.classList.toggle("active");
var ans = this.nextElementSibling;
if(ans.style.display==="block"){
ans.style.display="none";
}
else{
ans.style.display="block";
}
})
}