<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content="
width
=
device
-width,
initial-scale
=
1
,
shrink-to-fit
=
no
">
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin
=
"anonymous"
>
integrity
=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin
=
"anonymous"
>
</
script
>
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin
=
"anonymous"
>
</
script
>
<
title
>Accordion</
title
>
</
head
>
<
body
>
<
center
>
<
h4
><
a
class
=
"text-success"
style
=
"text-decoration: none;"
href
=
"#"
>
Geeksforgeeks
</
a
>
</
h4
><
br
>
<
div
id
=
"accordion"
>
<
div
class
=
"card"
>
<
div
class="card-header text-white
mb-3 bg-success"
id
=
"headingOne"
>
<
h5
class
=
"mb-0"
>
<
button
class
=
"btn btn-success"
data-toggle
=
"collapse"
data-target
=
"#collapseOne"
aria-expanded
=
"true"
aria-controls
=
"collapseOne"
>
#1MyCollapsible
</
button
>
</
h5
>
</
div
>
<
div
id
=
"collapseOne"
class
=
"main collapse show"
aria-labelledby
=
"headingOne"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
<
div
id
=
"accordionRecommendation"
>
<
div
class="card-header border
text-white mb-3 bg-success"
id
=
"headingRecommendation"
>
<
h5
class
=
"mb-0"
>
<
button
class
=
"btn btn-success collapsed"
data-toggle
=
"collapse"
data-target
=
"#collapseOne1"
aria-expanded
=
"false"
aria-controls
=
"collapseOne1"
>
Inner #1MyCollapsible
</
button
>
<
button
class="btn btn-success
collapsed"
data-toggle
=
"collapse"
data-target
=
"#collapseTwo1"
aria-expanded
=
"false"
aria-controls
=
"collapseTwo1"
>
Inner #2MyCollapsible
</
button
>
<
button
class="btn btn-success
collapsed"
data-toggle
=
"collapse"
data-target
=
"#collapseThree1"
aria-expanded
=
"false"
aria-controls
=
"collapseThree1"
>
Inner #3MyCollapsible
</
button
>
</
h5
>
</
div
>
<
div
class
=
"karte"
>
<
div
id
=
"collapseOne1"
class
=
"collapse"
aria-labelledby
=
"headingRecommendation"
data-parent
=
"#accordionRecommendation"
>
<
div
class
=
"card-body"
>
<
b
>Some Content of First One</
b
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"karte"
>
<
div
id
=
"collapseTwo1"
class
=
"collapse"
aria-labelledby
=
"headingRecommendation"
data-parent
=
"#accordionRecommendation"
>
<
div
class
=
"card-body"
>
<
b
>Some Content of First Two</
b
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"karte"
>
<
div
id
=
"collapseThree1"
class
=
"collapse"
aria-labelledby
=
"headingRecommendation"
data-parent
=
"#accordionRecommendation"
>
<
div
class
=
"card-body"
>
<
b
>Some Content of First Three</
b
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class="card-header text-white mb-3
bg-success"
id
=
"headingTwo"
>
<
h5
class
=
"mb-0"
>
<
button
class
=
"btn btn-success collapsed"
data-toggle
=
"collapse"
data-target
=
"#collapseTwo"
aria-expanded
=
"false"
aria-controls
=
"collapseTwo"
>
#2MyCollapsible
</
button
>
</
h5
>
</
div
>
<
div
id
=
"collapseTwo"
class
=
"collapse"
aria-labelledby
=
"headingTwo"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class="card-header text-white
mb-3 bg-success"
id
=
"headingThree"
>
<
h5
class
=
"mb-0"
>
<
button
class="btn btn-success
collapsed"
data-toggle
=
"collapse"
data-target
=
"#collapseThree"
aria-expanded
=
"false"
aria-controls
=
"collapseThree"
>
#3MyCollapsible
</
button
>
</
h5
>
</
div
>
<
div
id
=
"collapseThree"
class
=
"collapse"
aria-labelledby
=
"headingThree"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
</
div
>
</
div
>
</
div
>
</
div
>
</
center
>
</
body
>
</
html
>