Difference between revisions of "Accordions"
From Tweeki
(Created page with "=== Accordions === <nowiki> <div class="panel-group" id="accordion"> <accordion parent="accordion" heading="..."> ... </accordion> </div> </nowiki>") |
(→Result) |
||
| (20 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | === Accordions === | + | __TOC__ |
| + | [[Category:Components]] | ||
| + | === Standard Accordions === | ||
| − | <nowiki> | + | You can create accordions with very reduced code: |
| − | + | ||
| − | <accordion parent="accordion" heading="..."> | + | ==== Markup==== |
| − | ... | + | |
| − | </accordion> | + | <nowiki><div class="panel-group" id="accordion"></nowiki> |
| + | <nowiki><accordion parent="accordion" heading="SECTION1" class="in"></nowiki> | ||
| + | <nowiki>Lorem ipsum...</nowiki> | ||
| + | <nowiki></accordion></nowiki> | ||
| + | <nowiki><accordion parent="accordion" heading="SECTION2"></nowiki> | ||
| + | <nowiki>Lorem ipsum...</nowiki> | ||
| + | <nowiki></accordion></nowiki> | ||
| + | <nowiki></div></nowiki> | ||
| + | |||
| + | |||
| + | |||
| + | ====Result==== | ||
| + | |||
| + | <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> | ||
| + | |||
| + | ====HTML==== | ||
| + | |||
| + | <pre> | ||
| + | <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> | </div> | ||
| − | </ | + | </pre> |
Revision as of 18:15, 3 March 2019
Standard Accordions
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>