Difference between revisions of "Accordions"
From Tweeki
(→Markup) |
(→HTML) |
||
| (One intermediate revision by the same user not shown) | |||
| Line 30: | Line 30: | ||
<pre> | <pre> | ||
| − | + | <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"> | |
| − | <div class=" | + | <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> | |
| − | |||
| − | |||
| − | |||
| − | |||
</pre> | </pre> | ||
| Line 65: | Line 61: | ||
</div> | </div> | ||
<div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab"> | <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab"> | ||
| + | |||
=== Standard Accordions with Bootstrap 3 === | === Standard Accordions with Bootstrap 3 === | ||
Latest revision as of 23:11, 16 November 2020
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>