Tabs: Difference between revisions

From Tweeki
Jump to: navigation, search
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...

HTML