Difference between revisions of "Accordions"
From Tweeki
| Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
[[Category:Components]] | [[Category:Components]] | ||
| − | {{versions | + | {{versions}} |
| − | === Standard Accordions === | + | |
| + | <div class="tab-content" id="versionContent"> | ||
| + | <div class="tab-pane fade show active" id="bs4" role="tabpanel" aria-labelledby="bs4-tab"> | ||
| + | === Standard Accordions with Bootstrap 4 === | ||
You can create accordions with very reduced code: | You can create accordions with very reduced code: | ||
| Line 60: | Line 63: | ||
</div> | </div> | ||
</pre> | </pre> | ||
| − | + | ||
| − | === Standard Accordions === | + | |
| + | </div> | ||
| + | <div class="tab-pane fade" id="bs3" role="tabpanel" aria-labelledby="bs3-tab"> | ||
| + | |||
| + | |||
| + | === Standard Accordions with Bootstrap 3 === | ||
You can create accordions with very reduced code: | You can create accordions with very reduced code: | ||
| Line 119: | Line 127: | ||
</div> | </div> | ||
</pre> | </pre> | ||
| + | </div></div> | ||
Revision as of 22:44, 16 November 2020
Standard Accordions with Bootstrap 4
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>
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>