Here, we learn about how to create accordion using html and jquery. It can help to hide and show the content elements if we want to set a large amount of content or to set any question and answers with an easy manner. Follow the below example to get better responsiveness.
Example:
<!DOCTYPE html>
<html>
<head>
<title>How To Create Accordion Using Jquery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section>
<div class="container">
<h2>Accordion Section</h2>
<div class="accordin">
<h3 id="accordion_1">Heading 1</h3>
<div class="content-section">
<p>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.</p>
</div>
<h3 id="accordion_2">Heading 2</h3>
<div class="content-section">
<p>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.</p>
</div>
<h3 id="accordion_3">Heading 3</h3>
<div class="content-section">
<p>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.</p>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$(".content-section").first().toggle();
$(".accordin h3").click(function(){
var id = this.id;
$(".content-section").each(function(){
if($("#"+id).next()[0].id != this.id){
$(this).slideUp();
}
});
$(this).next().toggle();
});
});
</script>
</body>
</html> Add the below stylesheet to the html file to get responsive design.
body {
margin: 50px;
font-family: Arial, sans-serif;
}
#accordion_1, #accordion_2, #accordion_3 {
background-color: #f1f1f1;
color: #000;
cursor: pointer;
padding: 20px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.3s;
}
#accordion_1:hover {
background-color: #ddd;
}
#accordion_2:hover {
background-color: #ddd;
}
#accordion_3:hover {
background-color: #ddd;
}
.content-section {
padding: 0 20px;
display: none;
background-color: #fff;
overflow: hidden;
}
Output:
