Create Accordion using HTML CSS and jQuery

Tabs and Accordion | December 19, 2021

In this article we will show you how to create accordion menu using HTML CSS and jQuery.

Video tutorial of Create Accordion using HTML CSS and jQuery

This tutorial video can help you to Create Accordion using HTML CSS and jQuery.

You might like this

Create Accordion using HTML CSS and jQuery[Source Codes]

This source code can help you to create Create Accordion using HTML CSS and jQuery.

jQuery library source

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Accordion</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
	

<div class="accordion_area">
	<div class="accordion_box">
		<h3 class="acc_trigger">Accordion Title 1 <i class="fa fa-plus" aria-hidden="true"></i></h3>
		<div class="acc_container">
			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="accordion_box">
		<h3 class="acc_trigger">Accordion Title 2 <i class="fa fa-plus" aria-hidden="true"></i></h3>
		<div class="acc_container">
			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="accordion_box">
		<h3 class="acc_trigger">Accordion Title 3 <i class="fa fa-plus" aria-hidden="true"></i></h3>
		<div class="acc_container">
			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="accordion_box">
		<h3 class="acc_trigger">Accordion Title 4 <i class="fa fa-plus" aria-hidden="true"></i></h3>
		<div class="acc_container">
			<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. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>

</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*{
	box-sizing: border-box;
}
html,body{
	margin: 0px;
	font-size: 18px;
	font-family: arial;
}
.container{
	max-width: 800px;
	margin: 0 auto;
}
.accordion_box{
	border: 1px solid gray;
	padding: 0 15px 1px;
	background: #e1e1e1;
	color: #332e2e;
	border-radius: 10px;
	margin-bottom: 20px;
}
.accordion_box.active{
	background: #fff;
}
.acc_trigger{
	padding: 15px 40px 15px 0;
	margin: 0;
	font-size: 30px;
	position: relative;
	cursor: pointer;
}
.acc_trigger i{
	position: absolute;
	right: 0;
	top: 22px;
	font-size: 20px;
}
.acc_container{
	display: none;
}
.acc_container p{
	margin-top: 0px;
	line-height: 1.6;
}

JavaScript Code

Copy

$(document).ready(function() {
	$('.accordion_box:first').addClass('active')
	$('.accordion_box:first').children('.acc_trigger').children('i').addClass('fa-minus')
	$('.accordion_box:first').children('.acc_trigger').addClass('selected').next('.acc_container').show()

	$('.acc_trigger').click(function(event) {
		if($(this).hasClass('selected')){
			$(this).removeClass('selected');
			$(this).children('i').removeClass('fa-minus');
			$(this).next().slideUp();
			$(this).parent().removeClass('active');
		}else{
			$('.acc_trigger').removeClass('selected');
			$(this).addClass('selected');
			$('.acc_trigger').children('i').removeClass('fa-minus');
			$(this).children('i').addClass('fa-minus');
			$('.acc_trigger').next().slideUp();
			$(this).next().slideDown();
			$('.accordion_box').removeClass('active');
			$(this).parent().addClass('active');


		}
	});
});