Difference between revisions of "Tabs"
From Tweeki
(Created page with "__TOC__ Category:Components === Standard Accordions === You can create accordions with very reduced code: ==== Markup==== <nowiki><ul class="nav nav-tabs"></nowiki>...") |
(→Result) |
||
| Line 31: | Line 31: | ||
<div class="tab-content"> | <div class="tab-content"> | ||
<div id="tab1" class="tab-pane fade in active"> | <div id="tab1" class="tab-pane fade in active"> | ||
| − | + | '''Tab 1''' | |
| − | + | ||
| + | Lorem ipsum... | ||
</div> | </div> | ||
<div id="tab2" class="tab-pane fade"> | <div id="tab2" class="tab-pane fade"> | ||
| − | + | '''Tab 2''' | |
| − | + | ||
| + | Lorem ipsum... | ||
</div> | </div> | ||
</div> | </div> | ||
====HTML==== | ====HTML==== | ||
Revision as of 18:29, 4 July 2016
Standard Accordions
You can create accordions with very reduced code:
Markup
<ul class="nav nav-tabs">
<li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li>
<li><btn data-toggle="tab" class="">#tab2|Tab 2</btn></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h3>Tab 1</h3>
<p>Lorem ipsum...</p>
</div>
<div id="tab2" class="tab-pane fade">
<h3>Tab 2</h3>
<p>Lorem ipsum...</p>
</div>
</div>
Result
Tab 1
Lorem ipsum...
Tab 2
Lorem ipsum...