<!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 4 Accordion </title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
<style>
.accordion {
margin: 15px;
}
.accordion .fa {
margin-right: 0.2rem;
}
</style>
<script>
$(document).ready(function () {
// Add minus icon for collapse element which
// is open by default
$(".collapse.show").each(function () {
$(this).prev(".card-header").find(".fa")
.addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide
// of collapse element
$(".collapse").on('show.bs.collapse', function () {
$(this).prev(".card-header").find(".fa")
.removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function () {
$(this).prev(".card-header").find(".fa")
.removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
</head>
<body>
<div class="accordion">
<h2 style="padding-bottom: 15px; color:green;">
GeeksforGeeks
</h2>
<p>A Computer Science Portal for Geeks</p>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link"
data-toggle="collapse"
data-target="#collapseOne">
<i class="fa fa-plus"></i>
GeeksforGeeks
</button>
</h2>
</div>
<div id="collapseOne" class="collapse"
aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<p>
GeeksforGeeks is a computer
science portal. It is the best
platform to lean programming.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button"
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseTwo">
<i class="fa fa-plus"></i>
Bootstrap
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show"
aria-labelledby="headingTwo"
data-parent="#accordionExample">
<div class="card-body">
<p>
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button"
class="btn btn-link collapsed"
data-toggle="collapse"
data-target="#collapseThree">
<i class="fa fa-plus"></i>
HTML
</button>
</h2>
</div>
<div id="collapseThree" class="collapse"
aria-labelledby="headingThree"
data-parent="#accordionExample">
<div class="card-body">
<p>
HTML stands for HyperText Markup
Language. It is used to design
web pages using markup language.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>