Custom Responsive Tab With jQuery and CSS

Responsive jquery tab is a very simple tabbed interface plugin that automatically converts tabs into a toggled dropdown when the window size reaches a certain breakpoint.

responsive tabs example, responsive tabs jquery, responsive tabs html css

How to make use of it:

1. Include the jQuery library and jQuery tab.js script at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/tab.js"></script>

2. Build an HTML structure for tabs & tab panels.

<div id="responsiveTab">
  <h4 id="toggle-tab" class="toggle-tab-menu">TAB MENU</h4>
  <ul class="tabs">
    <li><a href="#">Tab-1</a></li>
    <li><a href="#">Tab-2</a></li>
    <li><a href="#">Tab-3</a></li>
    <li><a href="#">Tab-4</a></li>
    <li><a href="#">Tab-5</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab-1" class="tab-pane">
      <h3>Tab 1</h3>
      <p>Tab pane 1</p>
    </div>
    <div id="tab-2" class="tab-pane">
      <h3>Tab 2</h3>
      <p>Tab pane 2</p>
    </div>
    <div id="tab-3" class="tab-pane">
      <h3>Tab 3</h3>
      <p>Tab pane 3</p>
    </div>
    <div id="tab-4" class="tab-pane">
      <h3>Tab 4</h3>
      <p>Tab pane 4</p>
    </div>
    <div id="tab-5" class="tab-pane">
      <h3>Tab 5</h3>
      <p>Tab pane 5</p>
    </div>
  </div>
</div>

3. Add the following styles to your CSS file.

.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #2ECC71;
  float: left;
  width: 100%;
  color:#fff;
}

.tabs li {
  display: block;
  float: left;
}

.tabs li a {
  text-decoration: none;
  padding: 10px 16px;
  display: inline-block;
  color:#fff;
}

.tabs li a:hover {
  color: #F4f4f4;
  background: #27AE60;
}

.tabs li.active a { background: #27AE60; }

.tab-content {
  float: left;
  width: 100%;
  background-color: #eee;
}

.tab-pane {
  padding: 10px;
  display: none;
}

.tab-pane.active { display: block; }

.fade.in { opacity: 1; }

.fade {
  opacity: 0;
  transition: opacity 0.15s linear 0s;
}

.toggle-tab-menu {
  background: url("../images/bar.png") no-repeat scroll 10px center #121212;
  color: #FFFFFF;
  margin: 0;
  padding: 10px 0 10px 45px;
  text-align: left;
  display: none;
  cursor: pointer;
}

4. Configure the plugin with options.

$('#responsiveTab').responsiveTab({
  breakpoint: 767, // in pixel
  visibleTabIndex: 1, // initial tab
  toggleTabMenu: '#toggle-tab'
});

Responsive Tab Control, responsive jquery tab Plugin/Github

See Demo And Download

Official Website(akhilesh2310): Click Here

This superior jQuery/javascript plugin is developed by akhilesh2310. For extra advanced usage, please go to the official website.

Tags: akhilesh2310responsiveresponsive tabsresponsive tabs htmltabstabs plugin