Javascript MDBootstrap Accordion Component
MDBootstrap is a Material Design and bootstrap-based Javascript UI library that is used to make attractive webpages with its seamless and easy-to-use component. It is free for both personal & commercial use. In this article, we will know how to use Accordion Component in Javascript MDBootstap.
MDBootstrap Accordion Component is a vertically collapsing element to display and hide the content by implementing the classes & the JavaScript plugin.
Syntax:
<div class="accordion" id="gfg"> <div class="accordion-item"> <h2 class="accordion-header"> <button>Accordion 1</button> </h2> <div id="gfg1" class="accordion-collapse collapse show"> <div class="accordion-body"> Content </div> </div> </div> </div
Approach:
- Download Javascript MDBootstrap from the official site.
- Extract the files to the current working directory.
- In the Index.html file, specify the downloaded file path in the <head> tag.
<link rel=”icon” href=”img/mdb-favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.15.2/css/all.css” />
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap”/>
<link rel=”stylesheet” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script type=”text/javascript”></script>
Example 1: This is the basic example that shows how to use the accordion component in MDBootstrap Javascript.
HTML
<!DOCTYPE html > < html lang = "en" > < head > < title >Javascript MDBootstrap List Group Component</ title > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 , shrink-to-fit = no " /> < link rel = "icon" href = "img/mdb-favicon.ico" type = "image/x-icon" /> < link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> < link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> < link rel = "stylesheet" href = "css/mdb.min.css" /> < script type = "text/javascript" src = "js/mdb.min.js" > </ script > </ head > < body > < h2 style="margin-left: 50px; margin-top: 50px;"> w3wiki </ h2 > < h4 style = "margin-left: 50px;" > MDBootstrap Javascript Accordion Component </ h4 > < div class = "accordion" id = "gfg" style="width: 1250px; margin-left: 50px;"> < div class = "accordion-item" > < h2 class = "accordion-header" id = "headingOne" > < button class = "accordion-button" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg1" aria-controls = "gfg1" > Accordion 1 </ button > </ h2 > < div id = "gfg1" class = "accordion-collapse collapse show" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "headingTwo" > < button class = "accordion-button collapsed" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg2" aria-expanded = "false" aria-controls = "gfg2" > Accordion 2 </ button > </ h2 > < div id = "gfg2" class = "accordion-collapse collapse" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" > < button class = "accordion-button collapsed" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg3" aria-expanded = "false" aria-controls = "gfg3" > Accordion 3 </ button > </ h2 > < div id = "gfg3" class = "accordion-collapse collapse" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will know how to make a flush accordion Component that removes the side borders of the accordion component in MDBootstrap Javascript.
HTML
<!DOCTYPE html > < html lang = "en" > < head > < title >Javascript MDBootstrap List Group Component</ title > < meta charset = "UTF-8" /> < meta name = "viewport" content=" width = device -width, initial-scale = 1 , shrink-to-fit = no " /> < link rel = "icon" href = "img/mdb-favicon.ico" type = "image/x-icon" /> < link rel = "stylesheet" href = "https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> < link rel = "stylesheet" href = "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> < link rel = "stylesheet" href = "css/mdb.min.css" /> < script type = "text/javascript" src = "js/mdb.min.js" > </ script > </ head > < body > < h2 style="margin-left: 50px; margin-top: 50px;"> w3wiki </ h2 > < h4 style = "margin-left: 50px;" > MDBootstrap Javascript Accordion Component </ h4 > < div class = "accordion accordion-flush" id = "gfg" style="width: 1250px; margin-left: 50px;"> < div class = "accordion-item" > < h2 class = "accordion-header" id = "headingOne" > < button class = "accordion-button" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg1" aria-controls = "gfg1" > Accordion 1 </ button > </ h2 > < div id = "gfg1" class = "accordion-collapse collapse show" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "headingTwo" > < button class = "accordion-button collapsed" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg2" aria-expanded = "false" aria-controls = "gfg2" > Accordion 2 </ button > </ h2 > < div id = "gfg2" class = "accordion-collapse collapse" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" > < button class = "accordion-button collapsed" type = "button" data-mdb-toggle = "collapse" data-mdb-target = "#gfg3" aria-expanded = "false" aria-controls = "gfg3" > Accordion 3 </ button > </ h2 > < div id = "gfg3" class = "accordion-collapse collapse" data-mdb-parent = "#gfg" > < div class = "accordion-body" > MDBootstrap is a Material Design and bootstrap-based Angular UI library that is used to make good looking webpages with its seamless and easy-to-use component. It is free for both personal & commercial use </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://mdbootstrap.com/docs/standard/components/accordion/
Contact Us