<!DOCTYPE html>
<
html
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
integrity
=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin
=
"anonymous"
>
<
script
src
=
integrity
=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin
=
"anonymous"
>
</
script
>
<
script
src
=
integrity
=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin
=
"anonymous"
>
</
script
>
</
head
>
<
body
style
=
"text-align: center;"
>
<
div
class
=
"container mt-3"
style
=
"width: 700px;"
>
<
h1
style
=
"color: green;"
>
GeeksforGeeks
</
h1
>
<
p
>
<
a
class
=
"btn btn-primary"
data-toggle
=
"collapse"
href
=
"#multiCollapseExample1"
role
=
"button"
>
Toggle firs element
</
a
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-toggle
=
"collapse"
data-target
=
"#multiCollapseExample2"
>
Toggle second element
</
button
>
<
button
class
=
"btn btn-primary"
type
=
"button"
data-toggle
=
"collapse"
data-target
=
".multi-collapse"
>
Toggle both elements
</
button
>
</
p
>
<
div
class
=
"row"
>
<
div
class
=
"col"
>
<
div
class
=
"collapse multi-collapse"
id
=
"multiCollapseExample1"
>
<
div
class
=
"card card-body"
>
This is first element
</
div
>
</
div
>
</
div
>
<
div
class
=
"col"
>
<
div
class
=
"collapse multi-collapse"
id
=
"multiCollapseExample2"
>
<
div
class
=
"card card-body"
>
This is second element
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>