How to Use Accordion in Bootstrap | How to Use Bootstrap Accordion

Vertical Accordion Bootstrap 4 | How to Use Accordion in Bootstrap

What is Accordion in Bootstrap

Accordion is a toggle button or tabs that have blocks of contents in which we can expand or collapse to reveal or hide the contents that we have written in accordion.

You can add items or contents in the accordion that you want to show like as forms, paragraphs, checkbox, radio button and many more.

Use of Accordion in HTML

An Accordion is vertically or horizontally stacked list and the main reason to use accordion is that it reduces the scrolling of the page and makes the page interactive because you can reveal or hide your contents through one click.

Vertical Accordion Example

<style> /* Style the buttons that are used to open and close the accordion panel */ .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: 0.4s; } /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ .active, .accordion:hover { background-color: #ccc; } /* Style the accordion panel. Note: hidden by default */ .panel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } </style> <button class="accordion">Accordion Section #1</button> <div class="panel"> <p>This is <strong>first</strong> accordion item body.</p> </div> <button class="accordion">Accordion Section #2</button> <div class="panel"> <p>This is <strong>second</strong> accordion item body.</p> </div> <button class="accordion">Accordion Section #3</button> <div class="panel"> <p>This is <strong>third</strong> accordion item body.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } </script>

Output:

Vertical Tab with Accordion

 

<style> * {box-sizing: border-box} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 300px; } /* Style the buttons that are used to open the tab content */ .tab button { display: block; background-color: inherit; color: black; padding: 22px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 300px; } </style> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'India')">India</button> <button class="tablinks" onclick="openCity(event, 'Rajasthan')">Rajasthan</button> <button class="tablinks" onclick="openCity(event, 'Jaipur')">Jaipur</button> </div> <div id="India" class="tabcontent"> <h3>India</h3> <p>India</p> </div> <div id="Rajasthan" class="tabcontent"> <h3>Rajasthan</h3> <p>Rajasthan</p> </div> <div id="Jaipur" class="tabcontent"> <h3>Jaipur</h3> <p>Jaipur</p> </div> <script> function openCity(evt, cityName) { // Declare all variables var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } </script>

Output: