<!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
>