Bootstrap 5 Accordion Always Open
Bootstrap 5 Accordion Always open is used to change the default value of Accordion and change it to always-open accordion where if a tab of it is open then it will stay open until it is toggled to close by eliminating the data-bs-parent attribute with each accordion tab with the .accordion-collapse class.
Bootstrap5 Accordion Always open Classes: No special class is used to implement the always on setting of the accordion, the only change which is needed is to omit the data-bs-parent attribute.
Syntax:
<div class="accordion" id=" "> <div class="accordion-item"> <h2 class="accordion-header" id=" "> ... </h2> <div id=" " class="accordion-collapse"> <div class="accordion-body"> . . . . . </div> </div> </div> <div class="accordion-item">...</div> </div>
Example 1: The code example demonstrates how we can implement an always open simple accordion:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "ms-4" > Bootstrap 5 Accordion Always open </ h4 > < div class = "container" > < div class = "accordion" id = "accordionStayOpen" > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingOne" > < button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenOne" > Data Structures </ button > </ h2 > < div id = "alwaysOpenOne" class = "accordion-collapse" > < div class = "accordion-body" > < p > A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. The idea is to reduce the space and time complexities of different tasks. </ p > </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingTwo" > < button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenTwo" > Algorithms </ button > </ h2 > < div id = "alwaysOpenTwo" class = "accordion-collapse collapse" > < div class = "accordion-body" > < p > The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”.It can be understood by taking the example of cooking a new recipe. </ p > </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingThree" > < button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenThree" > BootStrap 5 </ button > </ h2 > < div id = "alwaysOpenThree" class = "accordion-collapse collapse" > < div class = "accordion-body" > < p > Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. </ p > </ div > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: The code below demonstrates how we can collapse an always-on accordion which is implemented above:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < h1 class = "m-4 text-success" > w3wiki </ h1 > < h4 class = "ms-4" > Bootstrap 5 Accordion Always open </ h4 > < div class = "container mt-4" > < nav class = "navbar navbar-dark bg-dark" > < div class = "container-fluid" > < button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarToggleExternalContent" > < span class = "navbar-toggler-icon" ></ span > </ button > < div class = "container collapse mt-4" id = "navbarToggleExternalContent" > < div class = "accordion" > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingOne" > < button class = "accordion-button" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenOne" > Data Structures </ button > </ h2 > < div id = "alwaysOpenOne" class = "accordion-collapse show" > < div class = "accordion-body" > < p > A data structure is a group of data elements that provides the easiest way to store and perform different actions on the data of the computer. A data structure is a particular way of organizing data in a computer so that it can be used effectively. The idea is to reduce the space and time complexities of different tasks. </ p > </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingTwo" > < button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenTwo" > Algorithms </ button > </ h2 > < div id = "alwaysOpenTwo" class = "accordion-collapse collapse" > < div class = "accordion-body" > < p > The word Algorithm means ” A set of finite rules or instructions to be followed in calculations or other problem-solving operations ” Or ” A procedure for solving a mathematical problem in a finite number of steps that frequently involves recursive operations”. It can be understood by taking the example of cooking a new recipe. </ p > </ div > </ div > </ div > < div class = "accordion-item" > < h2 class = "accordion-header" id = "panelsStayOpen-headingThree" > < button class = "accordion-button collapsed" type = "button" data-bs-toggle = "collapse" data-bs-target = "#alwaysOpenThree" > BootStrap 5 </ button > </ h2 > < div id = "alwaysOpenThree" class = "accordion-collapse collapse" > < div class = "accordion-body" > < p > Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has really a nice set of predefined CSS codes. Bootstrap uses different types of classes to make responsive websites. </ p > </ div > </ div > </ div > </ div > </ div > </ div > </ nav > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/accordion/#always-open
Contact Us