Responsive Tabs

Thanks to Responsive Tabs you easily distribute the content to particular sections without necessity of switching among sub-pages. Responsive Tabs have well-arranged structure and their activation is very intuitive and simple.

Important classes:

Correct structure of Responsive Tabs:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn">First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label">Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>

Responsive Tabs with URL hash:

This is great for when you want to open a specific tab by the URL.
If you want to allow URL hash for the tabs, is necessary to add the parameter “data-url” to the each “.tab-label” element. As second step, add some URL to “data-url” parameter (e.g. data-url=”some-tab-url”).

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn" data-url="first-tab">First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label" data-url="second-tab">Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label" data-url="third-tab">Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>

Responsive Tabs with icon in navigation:

<div class="tabs">
  <div class="tab-item tab-active">
    <a class="tab-label active-btn"><i class="icon-message"></i> First Tab</a>
    <div class="tab-content">
      <h4>First Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-star"></i> Second Tab</a>        
    <div class="tab-content">
      <h4>Second Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
  <div class="tab-item">
    <a class="tab-label"><i class="icon-heart"></i> Third Tab</a>
    <div class="tab-content">
      <h4>Third Tab Content</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>  
  </div>
</div>