The following example displays a simple accordion by extending the panel component. The use of the data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is display.
There are so many types of Accordion
- Default Accordion
- Accordion with icons
- Accordion with gradient background
- Accordion with a picture
Below you will see each of them in action with the proper example.
-
Default Accordion: This is basic Accordion there is no specialty in this Accordion but you can easily design this Accordion by yourself.
- Example:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap Collapse Demonstration</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
head
>
<
body
>
<
div
class
=
"container"
>
<
h2
style
=
"padding-bottom: 15px; color:green;"
>
GeeksforGeeks
</
h2
>
<
p
>A Computer Science Portal for Geeks</
p
>
<
div
id
=
"accordion"
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"card-link"
data-toggle
=
"collapse"
href
=
"#description1"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
id
=
"description1"
class
=
"collapse show"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description2"
>
Bootstrap
</
a
>
</
div
>
<
div
id
=
"description2"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
Bootstrap is free and open-source
collection of tools for creating
websites and web applications.
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description3"
>
HTML
</
a
>
</
div
>
<
div
id
=
"description3"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
HTML stands for HyperText Markup Language.
It is used to design web pages using markup
language.
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
- Example:
<!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
>
chevron_rightfilter_none - Output:
-
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap Collapse Demonstration</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.card-header{
background-image: linear-gradient(to bottom, green, yellow);
}
.card-body{
background-image: linear-gradient(to right, yellow, white);
}
</
style
>
<
head
>
<
body
>
<
div
class
=
"container"
>
<
h2
style
=
"padding-bottom: 15px; color:green;"
>
GeeksforGeeks
</
h2
>
<
p
>A Computer Science Portal for Geeks</
p
>
<
div
id
=
"accordion"
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"card-link"
data-toggle
=
"collapse"
href
=
"#description1"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
id
=
"description1"
class
=
"collapse show"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description2"
>
Bootstrap
</
a
>
</
div
>
<
div
id
=
"description2"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description3"
>
HTML
</
a
>
</
div
>
<
div
id
=
"description3"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language.
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
- Example:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Bootstrap Collapse Demonstration</
title
>
<
meta
charset
=
"utf-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
<
link
rel
=
"stylesheet"
href
=
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
script
src
=
</
script
>
<
style
>
.card{
width:600px;
}
.card-body{
width:400px;
float: left;
}
.right-body{
width:100px;
margin:10px;
float : right;
}
img{
width:100px;
height:100px;
}
</
style
>
<
head
>
<
body
>
<
div
class
=
"container"
>
<
h2
style
=
"padding-bottom: 15px; color:green;"
>
GeeksforGeeks
</
h2
>
<
p
>A Computer Science Portal for Geeks</
p
>
<
div
id
=
"accordion"
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"card-link"
data-toggle
=
"collapse"
href
=
"#description1"
>
GeeksforGeeks
</
a
>
</
div
>
<
div
id
=
"description1"
class
=
"collapse show"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
GeeksforGeeks is a computer science portal.
It is the best platform to lean programming.
</
div
>
<
div
class
=
"right-body"
>
<
img
src
=
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description2"
>
Bootstrap
</
a
>
</
div
>
<
div
id
=
"description2"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
Bootstrap is a free and open-source
collection of tools for creating
websites and web applications.
</
div
>
<
div
class
=
"right-body"
>
<
img
src
=
</
div
>
</
div
>
</
div
>
<
div
class
=
"card"
>
<
div
class
=
"card-header"
>
<
a
class
=
"collapsed card-link"
data-toggle
=
"collapse"
href
=
"#description3"
>
HTML
</
a
>
</
div
>
<
div
id
=
"description3"
class
=
"collapse"
data-parent
=
"#accordion"
>
<
div
class
=
"card-body"
>
HTML stands for Hyper Text Markup
Language. It is used to design web
pages using markup language.
</
div
>
<
div
class
=
"right-body"
>
<
img
src
=
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
chevron_rightfilter_none - Output:
Accordion with changeable icons: This example will show you how to add plus and minus icons in accordion with the help of font-awesome and toggle when you open an accordion with the help of jQuery.
Accordion with gradient background: This is a simple of accordian with the gradient color effects.
Accordion with the picture: In this example the accordion will conatins picture within it.