Accordions: Difference between revisions
From Tweeki
No edit summary |
|||
| Line 1: | Line 1: | ||
__TOC__ | __TOC__ | ||
[[Category:Components]] | [[Category:Components]] | ||
{{versions| | |||
=== Standard Accordions === | === Standard Accordions === | ||
| Line 59: | Line 60: | ||
</div> | </div> | ||
</pre> | </pre> | ||
| | |||
=== Standard Accordions === | |||
You can create accordions with very reduced code: | |||
==== Markup==== | |||
<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> | |||
</pre> | |||
}} | |||