Responsive tabs in wordpress using idTabs

Tabs are the less space more user interactive way of providing informations/shop names/product names etc.. This is the common feature where all type of websites can integrate responsive tabs with their sites.

If you are developing or maintaining any wordpress website and planning to integrate responsive tabs then you have came to correct place.

Responsive Tabs:
Many developer may already know what is responsive/responsive tabs, but I will give little info here for freshers.
Responsive/Responsive tabs are nothing but providing tabs/particular feature to support in all type of devices like mobile, tables, desktops, laptops etc., Same functionality and good user interface should be retained in all the devices[different size devices].

 

Responsive Tabs using idTabs:
There are many free plugins available to get the responsive tabs in wordpress, but personally I felt nothing was good/suitable like idTabs. I have checked around 20+ free tabs plugins. So used external jQuery plugin idTabs and got an expected result.

Now I will show you how to integrate idTabs with your existing wordpress site.

 

Requirement:
Download the idTabs jQuery script from here.

 

header.php:

Add the below entries to the header.php file inside header div.

[html]
<script src="http://www.sunsean.com/idTabs/jquery.idTabs.min.js"></script>
<script type="text/javascript">
$(".root ul").idTabs();
</script>
[/html]

 

Paste the below snippet at the last of the header section.

[html]

<div id="header">
<!– responsive tabs starts idTabs –>

<div class="root">
<ul class="idTabs">
<li ><a href="#tabl" class="selected">Tab1</a></li>
<li><a href="#tab2" >Tab2</a></li>
<li><a href="#tab3">Tab3</a></li>
<li><a href="#tab4">Tab4</a></li>
<li><a href="#tab5">Tab5</a></li>
<li><a href="#tab6">Tab6</a></li>
</ul>
<div id="tab1" style="display: block;">
<ul class="grid-list">
<li>Tab1 contents</li>
</ul>
</div>
<div id="tab2" style="display: none;">
<ul class="grid-list">
<li>tab2 content</li>
</ul>
</div>
<div id="tab3" style="display: none;">
<ul class="grid-list">
<li>Tab3 content</li>
</ul>
</div>
<div id="tab4" style="display: none;">
<ul class="grid-list">
<li>tab4 content</li>
</ul>
</div>
<div id="tab5" style="display: none;">
<ul class="grid-list">
<li>tab5 content</li>
</ul>
</div>
<div id="tab6" style="display: none;">
<ul class="grid-list">
<li>tab6 content</li>
</ul>
</div>

<!– responsive tabs ends idTabs –>
</div> <!– #header –>

[/html]

style.css:

[css]
/* Naveen idTags style starts */
.root {
clear: both;
color: #111;
display: block;
margin: 10px auto auto;
max-width: 1120px;
padding: 2px 6px;
width: auto;
}

.idTabs li {
float: left;
list-style: outside none none;
}

.root div {
background: snow none repeat scroll 0 0;
border-color: #000 #cdcdcd #cdcdcd;
border-style: solid;
border-width: 2px 1px 1px;
clear: left;
font: 10pt Georgia;
padding: 10px 10px 8px;
}

.idTabs li a {
background-color: #ececec;
background-position: 3px center;
background-repeat: no-repeat;
background-size: 14px auto;
color: #000;
display: block;
font: 11px Verdana;
letter-spacing: 1px;
margin-left: 0;
padding: 14px 10px 14px 25px;
text-decoration: none !important;
}

ul.grid-list li {
border: 1px solid #ececec;
display: inline-block;
margin-bottom: 4px;
max-width: 165px;
padding: 5px;
width: auto;
}

.root div a {
color: #000;
font-weight: bold;
}

ul.grid-list li img {
display: block;
margin: auto;
max-width: 160px;
}

/* Naveen idTags style ends */
[/css]

Now you can see the responsive tabs at the top of the site [header section]. Please reply to the comment section if you are facing any issues.