Live Demo: Bootstrap Accordion Menu for All Purpose

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Accordion Menu for All Purpose</title>		
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<style>
.accordion .card {
	color: #424e5d;
	border: 1px solid #dddddd;
}
.accordion .card a {
	color: #424e5d;
	text-decoration: none;				
}
.accordion .card-header {
	background: linear-gradient(#fff, #f1f1f1);
	padding: .75rem 1rem;
	position: relative;
}
.accordion .card-header:hover {
	background: linear-gradient(#f1f1f1, #e8e8e8);
}
.accordion .card-header h2 {
	font-size: 1rem;
}
.accordion .fa {
	width: 20px;
	margin-right: .25rem;
}
.accordion .card-header a {
	float: left;
	width: 100%;
	cursor: pointer;
}
.accordion .toggle {
	font-size: .8rem;
	line-height: .8rem;
	cursor: pointer;
	opacity: 0.7;
	position: absolute;
	right: 16px;
	top: 16px;
	width: 14px;
	margin: 0;
}
.accordion .toggle:hover {
	opacity: 1;
}
.accordion .card-body {
	padding: 0;
}
.accordion .list-group-item {				
	border-radius: 0;
	border-width: 1px 0 1px 0;
	padding-left: 30px;
	background: #d6dbe0;
	font-weight: 500;
}
.accordion .list-group-item:hover {
	background: #007bff;
}
.accordion .list-group-item:hover a {
	color: #fff !important;
}
.accordion .list-group-item:hover .badge{
	background: #fff;
	color: #007bff;
}
.accordion .list-group-item a {
	color: #61656b;
	display: block;
}
.accordion .list-group-item .badge {
	float: right;
	min-width: 36px;
}
.accordion .rotate{
	transform: rotate(180deg); 
}
</style>
<script>
$(document).ready(function(){			
	// Toggle plus minus icon on show hide of collapse element
	$(".collapse").on('show.bs.collapse', function(){
		$(this).parent(".card").find(".toggle").addClass("rotate");
	}).on('hide.bs.collapse', function(){
		$(this).parent(".card").find(".toggle").removeClass("rotate");
	});
});
</script>
</head>
<body>
<div class="container-lg mt-5">
	<div class="row">
		<div class="col-lg-3">
			<div class="accordion mb-2" id="accordionExample">
				<div class="card">
					<div class="card-header" id="headingOne">
						<h2 class="mb-0">									
							<a data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
								<span><i class="fa fa-user"></i> Account</span>
								<i class="fa fa-chevron-down toggle"></i>
							</a>
						</h2>
					</div>
					<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
						<div class="card-body">
							<ul class="list-group">
								<li class="list-group-item"><a href="#"><i class="fa fa-pencil"></i> Edit Info</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-key"></i> Change Password</a></li>
								<li class="list-group-item"><a href="#" class="text-danger"><i class="fa fa-trash"></i> Delete Account</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingTwo">
						<h2 class="mb-0">									
							<a data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
								<span><i class="fa fa-comments"></i> Messages</span>
								<i class="fa fa-chevron-down toggle rotate"></i>
							</a>
						</h2>
					</div>
					<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
						<div class="card-body">
							<ul class="list-group">
								<li class="list-group-item"><a href="#"><i class="fa fa-inbox"></i> Inbox <span class="badge badge-pill badge-primary">20</span></a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-paper-plane"></i> Sent</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-file-text"></i> Drafts <span class="badge badge-pill badge-info">15</span></a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-trash"></i> Trash</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingThree">
						<h2 class="mb-0">									
							<a data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
								<span><i class="fa fa-bar-chart"></i> Reports</span>
								<i class="fa fa-chevron-down toggle"></i>
							</a>
						</h2>
					</div>
					<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
						<div class="card-body">
							<ul class="list-group">										
								<li class="list-group-item"><a href="#"><i class="fa fa-dollar"></i> Sales</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-tags"></i> Orders</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-plane"></i> Shipment</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-users"></i> Customers</a></li>										
							</ul>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingFour">
						<h2 class="mb-0">									
							<a data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
								<span><i class="fa fa-cog"></i> Settings</span>
								<i class="fa fa-chevron-down toggle"></i>
							</a>
						</h2>
					</div>
					<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
						<div class="card-body">
							<ul class="list-group">
								<li class="list-group-item"><a href="#"><i class="fa fa-font"></i> Typography</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-bell"></i> Notifications</a></li>
								<li class="list-group-item"><a href="#"><i class="fa fa-map"></i> Maps</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingFive">
						<h2 class="mb-0"><a href="#"><i class="fa fa-power-off"></i> Logout</a></h2>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-9">
			<div class="jumbotron">
				<h1 class="display-4">Hello, world!</h1>
				<p class="lead">This is a simple example of accordion menu that can easily be integrated into any Bootstrap template. You'll find many such examples at <a href="https://www.tutorialrepublic.com" target="_blank">tutorialrepublic.com</a>.</p>
				<hr class="my-4">						
				<a class="btn btn-primary btn-lg" href="https://www.tutorialrepublic.com/snippets/gallery.php" target="_blank">Learn more</a>
			</div>
		</div>
	</div>
</div>
</body>
</html>