Difference between revisions of "Tabs"
From Tweeki
(→Result) |
(→Result) |
||
| Line 25: | Line 25: | ||
====Result==== | ====Result==== | ||
| + | <div> | ||
<ul class="nav nav-tabs"> | <ul class="nav nav-tabs"> | ||
<li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li> | <li class="active"><btn data-toggle="tab" class="">#tab1|Tab 1</btn></li> | ||
| Line 35: | Line 36: | ||
<div id="tab2" class="tab-pane fade"> | <div id="tab2" class="tab-pane fade"> | ||
'''Tab 2''': Lorem ipsum... | '''Tab 2''': Lorem ipsum... | ||
| + | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
====HTML==== | ====HTML==== | ||
Revision as of 20:35, 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...