Difference between revisions of "Tabs"
From Tweeki
(→Result) |
(→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''' | + | '''Tab 1''': Lorem ipsum... |
| − | |||
| − | Lorem ipsum... | ||
</div> | </div> | ||
<div id="tab2" class="tab-pane fade"> | <div id="tab2" class="tab-pane fade"> | ||
| − | '''Tab 2''' | + | '''Tab 2''': Lorem ipsum... |
| − | |||
| − | Lorem ipsum... | ||
</div> | </div> | ||
</div> | </div> | ||
====HTML==== | ====HTML==== | ||
Revision as of 18:34, 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...