Responsive Tab using Jquery

This tutorial will help you to create Responsive Tab using Jquery.

Folder and Files Strucure you need to create

ProjectFolder

------>images
|_________all Images (bar.png)
------>js
|_________all js files(store jquery library and create custom.js file in js folder)
------>index.html
------>style.css

Step 1.

In index.html file At header section link the style.css

<link href="style.css" rel="stylesheet" type="text/css">

Link Jquery libraries in header section after the CSS file linked

<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/custom.js"></script>

Note:- 1.I have used Jquery 2.0.3 version file. You can use any Jquery Liberary
2. custom.js file contains custom jquery code to create tooltip for image using alt value of image.

Step 2.

Inside your body tag of index.html Add fowllowing html code

<div  class="tab-example">
<h4 class="toggle-tabmenu">TAB MENU</h4>
<ul  class="tabs" id="myTab">
<li class="tabs"><a href="#tab1">TAB 1 </a></li>
<li class=""><a href="#tab2">TAB 2 </a></li>
<li class=""><a href="#tab3">TAB 3 </a></li></ul>
<div class="tab-content"  id="myTabContent">
<div id="tab1" class="tab-pane fade active in">
<h2>Tab 1 Content</h2>
<p>Raw denim you probably haven't heard of them jean shorts Austin. </p>
</div>
<div id="tab2" class="tab-pane fade">
<h2>Tab 2 Content</h2>
<p>Raw denim you probably haven't heard of them jean shorts Austin. </p>
</div>
<div id="tab3" class="tab-pane fade">
<h2>Tab 3 Content</h2>
<p>Raw denim you probably haven't heard of them jean shorts Austin. </p>
</div>

</div>
</div>

Step 3.

Inside style.css file add follwoing css code

.tab-example{border:1px solid #CCC;float:left;width:100%;min-width:200px;}
.tabs{list-style:none;margin:0;padding:0;background:#CCC;float:left;width:100%;}
.tabs li{display:block;float:left;}
.tabs li a{text-decoration:none;padding:10px 16px;float:left;}
.tabs li a:hover{color:#F4f4f4;background:#333;}
.tabs li.active a{background:#FFF;}
.tab-content{float:left;}
.tab-pane{padding:10px;}
.fade.in {  opacity: 1;}
.fade {  opacity: 0; transition: opacity 0.15s linear 0s;}
.toggle-tabmenu {background: url("images/bar.png") no-repeat scroll 10px center #121212;color: #FFFFFF;margin:

0;padding: 10px 0 10px 34px;    text-align: left;display:none;cursor:pointer;}

/* Responsive Tab Media Queries */
@media (max-width: 767px) { .toggle-tabmenu {display:block;}.tabs li{width:100%;}.tabs li a

{width:94.1%;padding:10px 3%;}.tabs{display:none;} }

Step 4:

Inside custom.js file add following Jquery code

// JavaScript Document

$(document).ready(function(){
$('#myTabContent .tab-pane').hide();
$('#myTabContent .tab-pane.active').show();
$('#myTab li').on('click',function(){
var selected  = $(this).children('a').attr('href');
$('#myTab li').removeClass('active');
$(this).addClass('active');
$('#myTabContent .tab-pane.in').removeClass('active in');
$('#myTabContent .tab-pane').hide();
$('#myTabContent '+ selected +'').addClass('active in');
$('#myTabContent '+ selected +'').show();

});
$('.toggle-tabmenu').on('click',function(){
$('.tabs').slideToggle();
});
$( window ).resize(function() {
if($(window).width() > 767)
{$('.tabs').show();}else{$('.tabs').hide();}
});

});

Step 5: Save all files and Open index.html file.