Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
<div class="accordion" id="accordion62894682"> <div class="card"> <div class="card-header" id="header-0"> <h2 class="mb-0"> <button class="btn btn-link w-100 h-100 text-left" type="button" data-toggle="collapse" data-target="#panel5583538" aria-expanded="false" aria-controls="header-0">Accordion 1</button> </h2> </div> <div id="panel5583538" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion62894682"> <div class="card-body">Lorem ipsum dolor sit amet.</div> </div> </div> <div class="card"> <div class="card-header" id="header-1"> <h2 class="mb-0"> <button class="btn btn-link w-100 h-100 text-left" type="button" data-toggle="collapse" data-target="#panel27469154" aria-expanded="false" aria-controls="header-1">Accordion 2</button> </h2> </div> <div id="panel27469154" class="collapse" aria-labelledby="headingOne" data-parent="#accordion62894682"> <div class="card-body">Lorem ipsum dolor sit amet.</div> </div> </div> <div class="card"> <div class="card-header" id="header-2"> <h2 class="mb-0"> <button class="btn btn-link w-100 h-100 text-left" type="button" data-toggle="collapse" data-target="#panel33668889" aria-expanded="false" aria-controls="header-2">Accordion 3</button> </h2> </div> <div id="panel33668889" class="collapse" aria-labelledby="headingOne" data-parent="#accordion62894682"> <div class="card-body">Lorem ipsum dolor sit amet.</div> </div> </div> </div>
Custom JS
If you choose to create a Checklist instead of a simple accordion, you'll need to add the following JQuery to your Javascript file. You will also need a web icon font, such as the Bootstrap Icons used here.
// Show all the panels open again when checklist selected
$(document).on("click", ".checklist-refresh", function(){
// Show panels
$(this).parent().parent().find(".collapse").collapse("show");
// Remove the checked checkboxes
$(this).parent().parent().find(".btn-link i").addClass("bi-square").removeClass("bi-check-square");
});
// Change the icon when panel header clicked on
$(document).on("click", ".br-checklist-div .btn-link", function(){
// If checked, uncheck. And vice-versa
if ( $(this).find("i").hasClass("bi-square")) {
$(this).find("i").removeClass("bi-square").addClass("bi-check-square");
} else {
$(this).find("i").removeClass("bi-check-square").addClass("bi-square");
}
});