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 19: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>