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