Bootstrap 5 Accordion/Collapsible
Similar to older Bootstrap variations, chances are you’ll create accordion or collapsible elements in your net pages utilizing the Bootstrap 5 framework – with out utilizing JavaScript.
Why use Accordion?
You probably have much less area on an online web page and extra content material to indicate then chances are you’ll create a panel line part that expands because the consumer clicks on the heading. In accordion, the content material is pushed down fairly than overlapping the highest web page content material (like overlays).
The content material hidden beneath the heading could also be textual content, photos or video, and so forth.
Bootstrap 5 has built-in courses e.g. collapse, accordion-collapse, accordion-button, and so forth. that you could be use together to create panels with content material in your web site.
An instance of a easy accordion in Bootstrap 5
Within the first instance, we have now created an accordion part with three panels. As the online web page masses, the primary panel is opened with its content material.
The accordion may be closed/opened by utilizing the arrows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
</head> <physique>
<div class=“m-4”>
<div class=“accordion” id=“JAZAccordion”>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2>
<div id=“collapseItemOne” class=“accordion-collapse collapse present” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-tips-tutorials/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingTwo”>
<button sort=“button” class=“accordion-button” data-bs-toggle=“collapse” data-bs-target=“#collapseItemTwo”>Bootstrap 4</button>
</h2>
<div id=“collapseItemTwo” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-4/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingThree”>
<button sort=“button” class=“accordion-button collapsed” data-bs-toggle=“collapse” data-bs-target=“#collapseItemThree”>Bootstrap 5</button>
</h2>
<div id=“collapseItemThree” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-5/”>right here</a></p>
</div>
</div>
</div>
</div>
</div>
</physique>
</html> |
That is how the code labored:
- Bootstrap 5 makes use of a collapse plug-in internally for making the accordion collapsible.
- In the primary <div>, the .accordion class is used
- Inside that div, the <h2> tag is used that refers .accordion-header class for creating the heading of the panels.
- The contents div makes use of accordion-collapse collapse. If you wish to open that panel by default then add .present class.
- Lastly, the .card-body class is used the place we positioned the content material.
- Repeat the method for creating different panels with their contents.
An accordion with varied coloration panels instance
Through the use of Bootstrap 5 coloration courses, chances are you’ll create panels/headings with totally different colours. The instance under makes use of the next coloration courses for creating an accordion:
- bg-primary text-white
- bg-success text-white
- bg-warning text-white
You could be taught extra about background and textual content coloration courses.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<physique>
<div class=“m-4”>
<div class=“accordion” id=“JAZAccordion”>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed bg-primary text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2>
<div id=“collapseItemOne” class=“accordion-collapse collapse present” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-tips-tutorials/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingTwo”>
<button sort=“button” class=“accordion-button bg-success text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemTwo”>Bootstrap 4</button>
</h2>
<div id=“collapseItemTwo” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-4/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingThree”>
<button sort=“button” class=“accordion-button collapsed bg-warning text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemThree”>Bootstrap 5</button>
</h2>
<div id=“collapseItemThree” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-5/”>right here</a></p>
</div>
</div>
</div>
</div>
</div> </physique>
</html> |
Discover the next strains that comprise heading within the code:
|
|
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed bg-primary text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2> |
Maintain opened accordions as different is clicked
Within the above two examples, the opened panel is closed if you open one other panel. In case you wish to maintain opened panels when a closed one is clicked, observe this stuff:
- Take away or don’t use the data-bs-parent attribute on every .accordion-collapse
See the instance under:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
</head>
<physique>
<div class=“m-4”>
<div class=“accordion” id=“JAZAccordion”>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed bg-primary text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2>
<div id=“collapseItemOne” class=“accordion-collapse collapse present” >
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-tips-tutorials/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingTwo”>
<button sort=“button” class=“accordion-button bg-success text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemTwo”>Bootstrap 4</button>
</h2>
<div id=“collapseItemTwo” class=“accordion-collapse collapse” >
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-4/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingThree”>
<button sort=“button” class=“accordion-button collapsed bg-warning text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemThree”>Bootstrap 5</button>
</h2>
<div id=“collapseItemThree” class=“accordion-collapse collapse” >
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-5/”>right here</a></p>
</div>
</div>
</div>
</div>
</div>
</physique>
</html> |
You may see, all accordions stay open.
Need to change icons to open/shut accordions? See an instance with circle arrows
You may want to change the icons of the accordion which might be offered by default as utilizing the Bootstrap 5 framework.
That is easy to vary. First, see an instance under the place we used the up/down circle arrow (svg icons) offered by Bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
<type>
.accordion-button::after {
background-image: url(“knowledge:picture/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”%23333″ xmlns=”http://www.w3.org/2000/svg”%3epercent3cpath fill-rule=”evenodd” d=’M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z’ clip-rule=”evenodd”/%3epercent3c/svgpercent3e”);
rework: scale(0.75) !essential;
}
.accordion-button:not(.collapsed)::after {
background-image: url(“knowledge:picture/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”%23333″ xmlns=”http://www.w3.org/2000/svg”%3epercent3cpath fill-rule=”evenodd” d=’M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z’ clip-rule=”evenodd”/%3epercent3c/svgpercent3e”);
}
</type>
</head>
<physique>
<div class=“m-4”>
<div class=“accordion” id=“JAZAccordion”>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed bg-primary text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2>
<div id=“collapseItemOne” class=“accordion-collapse collapse present” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-tips-tutorials/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingTwo”>
<button sort=“button” class=“accordion-button bg-success text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemTwo”>Bootstrap 4</button>
</h2>
<div id=“collapseItemTwo” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-4/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingThree”>
<button sort=“button” class=“accordion-button collapsed bg-warning text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemThree”>Bootstrap 5</button>
</h2>
<div id=“collapseItemThree” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-5/”>right here</a></p>
</div>
</div>
</div>
</div>
</div> </physique>
</html> |
How one can change the icon within the accordion?
- You may even see the icon listing right here.
- Above the </head> tag, the <type> is used to switch the default icons.
- You should use accordion-button::after and accordion-button:not courses and exchange the code for the icon. We used SVG offered by Bootstrap.
Styling the content material space of the accordion instance
Similar to the panels, you might also change the background, textual content coloration, and so forth. of the content material space of an accordion.
For that, simply add the contextual background/textual content courses or different customized courses that you simply wish to type the content material space.
Within the demo under, we simply added the background coloration to vary the look of content material space:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x” crossorigin=“nameless”>
<script src=“https://cdn.jsdelivr.web/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
<type>
.accordion-button::after {
background-image: url(“knowledge:picture/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”%23333″ xmlns=”http://www.w3.org/2000/svg”%3epercent3cpath fill-rule=”evenodd” d=’M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V4.5z’ clip-rule=”evenodd”/%3epercent3c/svgpercent3e”);
rework: scale(0.75) !essential;
}
.accordion-button:not(.collapsed)::after {
background-image: url(“knowledge:picture/svg+xml,%3csvg viewBox=’0 0 16 16′ fill=”%23333″ xmlns=”http://www.w3.org/2000/svg”%3epercent3cpath fill-rule=”evenodd” d=’M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z’ clip-rule=”evenodd”/%3epercent3c/svgpercent3e”);
}
</type>
</head>
<physique>
<div class=“m-4”>
<div class=“accordion” id=“JAZAccordion”>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingOne”>
<button sort=“button” class=“accordion-button collapsed bg-secondary text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemOne”>Bootstrap 3</button>
</h2>
<div id=“collapseItemOne” class=“accordion-collapse collapse present” data-bs-parent=“#JAZAccordion”>
<div class=“card-body bg-light text-danger”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-tips-tutorials/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingTwo”>
<button sort=“button” class=“accordion-button bg-info text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemTwo”>Bootstrap 4</button>
</h2>
<div id=“collapseItemTwo” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body bg-light text-info”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-4/”>right here</a></p>
</div>
</div>
</div>
<div class=“accordion-item”>
<h2 class=“accordion-header” id=“headingThree”>
<button sort=“button” class=“accordion-button collapsed bg-danger text-white” data-bs-toggle=“collapse” data-bs-target=“#collapseItemThree”>Bootstrap 5</button>
</h2>
<div id=“collapseItemThree” class=“accordion-collapse collapse” data-bs-parent=“#JAZAccordion”>
<div class=“card-body bg-light text-danger”>
<p>Accordion is supported in Bootstrap 3. To study Bootstrap 3, go to its tutorials <a href=“https://www.jquery-az.com/bootstrap-5/”>right here</a></p>
</div>
</div>
</div>
</div>
</div>
</physique>
</html> |
You may see varied coloration panels together with their content material areas.
