Bootstrap 4 | Accordion
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><htmllang="en"><head><title>Bootstrap Collapse Demonstration</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><head><body><divclass="container"><h2style="padding-bottom: 15px; color:green;">GeeksforGeeks</h2><p>A Computer Science Portal for Geeks</p><divid="accordion"><divclass="card"><divclass="card-header"><aclass="card-link"data-toggle="collapse"href="#description1">GeeksforGeeks</a></div><divid="description1"class="collapse show"data-parent="#accordion"><divclass="card-body">GeeksforGeeks is a computer science portal.It is the best platform to lean programming.</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description2">Bootstrap</a></div><divid="description2"class="collapse"data-parent="#accordion"><divclass="card-body">Bootstrap is free and open-sourcecollection of tools for creatingwebsites and web applications.</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description3">HTML</a></div><divid="description3"class="collapse"data-parent="#accordion"><divclass="card-body">HTML stands for HyperText Markup Language.It is used to design web pages using markuplanguage.</div></div></div></div></div></body></html> - 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.
- Example:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Bootstrap 4 Accordion </title><linkrel="stylesheet"href=<linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</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><divclass="accordion"><h2style="padding-bottom: 15px; color:green;">GeeksforGeeks</h2><p>A Computer Science Portal for Geeks</p><divclass="accordion"id="accordionExample"><divclass="card"><divclass="card-header"id="headingOne"><h2class="mb-0"><buttontype="button"class="btn btn-link"data-toggle="collapse"data-target="#collapseOne"><iclass="fa fa-plus"></i>GeeksforGeeks</button></h2></div><divid="collapseOne"class="collapse"aria-labelledby="headingOne"data-parent="#accordionExample"><divclass="card-body"><p>GeeksforGeeks is a computerscience portal. It is the bestplatform to lean programming.</p></div></div></div><divclass="card"><divclass="card-header"id="headingTwo"><h2class="mb-0"><buttontype="button"class="btn btn-link collapsed"data-toggle="collapse"data-target="#collapseTwo"><iclass="fa fa-plus"></i>Bootstrap</button></h2></div><divid="collapseTwo"class="collapse show"aria-labelledby="headingTwo"data-parent="#accordionExample"><divclass="card-body"><p>Bootstrap is a free and open-sourcecollection of tools for creatingwebsites and web applications.</p></div></div></div><divclass="card"><divclass="card-header"id="headingThree"><h2class="mb-0"><buttontype="button"class="btn btn-link collapsed"data-toggle="collapse"data-target="#collapseThree"><iclass="fa fa-plus"></i>HTML</button></h2></div><divid="collapseThree"class="collapse"aria-labelledby="headingThree"data-parent="#accordionExample"><divclass="card-body"><p>HTML stands for HyperText MarkupLanguage. It is used to designweb pages using markup language.</p></div></div></div></div></div></body></html> - Output:
Accordion with gradient background: This is a simple of accordian with the gradient color effects.
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Collapse Demonstration</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</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><divclass="container"><h2style="padding-bottom: 15px; color:green;">GeeksforGeeks</h2><p>A Computer Science Portal for Geeks</p><divid="accordion"><divclass="card"><divclass="card-header"><aclass="card-link"data-toggle="collapse"href="#description1">GeeksforGeeks</a></div><divid="description1"class="collapse show"data-parent="#accordion"><divclass="card-body">GeeksforGeeks is a computer science portal.It is the best platform to lean programming.</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description2">Bootstrap</a></div><divid="description2"class="collapse"data-parent="#accordion"><divclass="card-body">Bootstrap is a free and open-sourcecollection of tools for creatingwebsites and web applications.</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description3">HTML</a></div><divid="description3"class="collapse"data-parent="#accordion"><divclass="card-body">HTML stands for Hyper Text MarkupLanguage. It is used to design webpages using markup language.</div></div></div></div></div></body></html>- Output:
Accordion with the picture: In this example the accordion will conatins picture within it.
- Example:
- Example:
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Collapse Demonstration</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</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><divclass="container"><h2style="padding-bottom: 15px; color:green;">GeeksforGeeks</h2><p>A Computer Science Portal for Geeks</p><divid="accordion"><divclass="card"><divclass="card-header"><aclass="card-link"data-toggle="collapse"href="#description1">GeeksforGeeks</a></div><divid="description1"class="collapse show"data-parent="#accordion"><divclass="card-body">GeeksforGeeks is a computer science portal.It is the best platform to lean programming.</div><divclass="right-body"><imgsrc=</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description2">Bootstrap</a></div><divid="description2"class="collapse"data-parent="#accordion"><divclass="card-body">Bootstrap is a free and open-sourcecollection of tools for creatingwebsites and web applications.</div><divclass="right-body"><imgsrc=</div></div></div><divclass="card"><divclass="card-header"><aclass="collapsed card-link"data-toggle="collapse"href="#description3">HTML</a></div><divid="description3"class="collapse"data-parent="#accordion"><divclass="card-body">HTML stands for Hyper Text MarkupLanguage. It is used to design webpages using markup language.</div><divclass="right-body"><imgsrc=</div></div></div></div></div></body></html> - Output:
