Bootstrap 5 Demo
Bootstrap 5 Code
Output
<!DOCTYPE html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <style> .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e"); transform: scale(0.75) !important; } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'%3e%3cpath 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'/%3e%3c/svg%3e"); } </style> </head> <body> <div class="m-4"> <div class="accordion" id="JAZAccordion"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button type="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 show" data-bs-parent="#JAZAccordion"> <div class="card-body"> <p>Accordion is supported in Bootstrap 3. To learn about Bootstrap 3, go to its tutorials <a href="https://www.jquery-az.com/bootstrap-tips-tutorials/">here</a></p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button type="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 learn about Bootstrap 3, go to its tutorials <a href="https://www.jquery-az.com/bootstrap-4/">here</a></p> </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button type="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 learn about Bootstrap 3, go to its tutorials <a href="https://www.jquery-az.com/bootstrap-5/">here</a></p> </div> </div> </div> </div> </div> </body> </html>
Bootstrap 3
Accordion is supported in Bootstrap 3. To learn about Bootstrap 3, go to its tutorials
here
Bootstrap 4
Accordion is supported in Bootstrap 3. To learn about Bootstrap 3, go to its tutorials
here
Bootstrap 5
Accordion is supported in Bootstrap 3. To learn about Bootstrap 3, go to its tutorials
here