Difference between revisions of "Tabs"

From Tweeki
Jump to: navigation, search
Line 45: Line 45:
 
<div>
 
<div>
 
   <ul class="nav nav-tabs">
 
   <ul class="nav nav-tabs">
     <li class="active"><a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a></li>
+
     <li class="active">
     <li><a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a></li>
+
      <a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
 +
    </li>
 +
     <li>
 +
      <a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
 +
    </li>
 
   </ul>
 
   </ul>
 
   <div class="tab-content">
 
   <div class="tab-content">

Revision as of 19:36, 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

<div>
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1" id="n-.23tab1" class="tab-toggle" data-toggle="tab">Tab 1</a>
    </li>
    <li>
      <a href="#tab2" id="n-.23tab2" class="tab-toggle" data-toggle="tab">Tab 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
      <p><b>Tab 1</b>: Lorem ipsum...</p>
    </div>
    <div id="tab2" class="tab-pane fade">
      <p><b>Tab 2</b>: Lorem ipsum...</p>
    </div>
  </div>
</div>