Accordions
From Tweeki
Standard Accordions with Bootstrap 4
You can create accordions with very reduced code:
Markup
<div class="accordion" id="accordion"> <accordion parent="accordion" heading="SECTION1" class="show"> Lorem ipsum... </accordion> <accordion parent="accordion" heading="SECTION2"> Lorem ipsum... </accordion> </div>
Result
Lorem ipsum...
Lorem ipsum...
HTML
<div class="accordion mb-4" id="accordion"> <div class="card"> <div class="card-header" id="accordion1Heading"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion1" aria-expanded="true" aria-controls="accordion1"> SECTION1 </button> </h2> </div> <div id="accordion1" class="collapse show" aria-labelledby="accordion1Heading" data-parent="#accordion" style=""> <div class="card-body">Lorem ipsum...</div> </div> </div> <div class="card"> <div class="card-header" id="accordion2Heading"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-parent="#accordion" data-target="#accordion2" aria-expanded="false" aria-controls="accordion2"> SECTION2 </button> </h2> </div> <div id="accordion2" class="collapse" aria-labelledby="accordion2Heading" data-parent="#accordion" style=""> <div class="card-body">Lorem ipsum...</div> </div> </div> </div>
Standard Accordions with Bootstrap 3
You can create accordions with very reduced code:
Markup
<div class="panel-group" id="accordion"> <accordion parent="accordion" heading="SECTION1" class="in"> Lorem ipsum... </accordion> <accordion parent="accordion" heading="SECTION2"> Lorem ipsum... </accordion> </div>
Result
Lorem ipsum...
Lorem ipsum...
HTML
<div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#accordion1" data-parent="#accordion" data-toggle="collapse"> SECTION1 </a> </h4> </div> <div class="panel-collapse collapse in" id="accordion1"> <div class="panel-body"> Lorem ipsum... </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#accordion2" data-parent="#accordion" data-toggle="collapse"> SECTION2 </a> </h4> </div> <div class="panel-collapse collapse" id="accordion2"> <div class="panel-body"> Lorem ipsum... </div> </div> </div> </div>