Difference between revisions of "Accordions"
From Tweeki
| Line 11: | Line 11: | ||
==== Markup==== | ==== Markup==== | ||
| − | <nowiki><div class=" | + | <nowiki><div class="accordion" id="accordion"></nowiki> |
<nowiki><accordion parent="accordion" heading="SECTION1" class="show"></nowiki> | <nowiki><accordion parent="accordion" heading="SECTION1" class="show"></nowiki> | ||
<nowiki>Lorem ipsum...</nowiki> | <nowiki>Lorem ipsum...</nowiki> | ||
| Line 24: | Line 24: | ||
====Result==== | ====Result==== | ||
| − | <div class=" | + | <div class="accordion" id="accordion"> |
<accordion parent="accordion" heading="SECTION1" class="show">Lorem ipsum...</accordion> | <accordion parent="accordion" heading="SECTION1" class="show">Lorem ipsum...</accordion> | ||
<accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion> | <accordion parent="accordion" heading="SECTION2">Lorem ipsum...</accordion> | ||
Revision as of 23:05, 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 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>