Simple Responsive jQuery Tabs Plugin With Fade Effects

Just another simple clean, responsive and cross-browser jQuery tabs plugin that allows you to switch content sections in a tabbed interface, with a subtle fade-in effect.

How to use it:

1. Include the latest jQuery javascript library and responsive-tabs.min.js at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="assets/js/responsive-tabs.min.js" type="text/javascript"></script> 

2. Markup html structure.

<div id="demo" class="container">
<ul class="tabs">
<li><a href="#demo-tab-1" target="_self">Tab 1</a></li>
<li><a href="#demo-tab-2" target="_self">Tab 2</a></li>
<li><a href="#demo-tab-3" target="_self">Tab 3</a></li>
</ul>
<div class="tabs-content">
<div id="demo-tab-1" class="tabs-panel">
<div class="tab-title"></div>
<p> Section 1 </p>
</div>
<div id="demo-tab-2" class="tabs-panel">
<div class="tab-title"></div>
<p> Section 2 </p>
</div>
<div id="demo-tab-3" class="tabs-panel">
<div class="tab-title"></div>
<p> Section 3 </p>
</div>
</div>
</div>

3. The required CSS to style the tabs.

/*	Responsive Tabs v1.0, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/
//	======================================================================================= */

/*	Table of Contents
//	==================================================
//		#Reset
//		#Themes


/*	#Reset
//	================================================== */

.tabs {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabs li {
margin: 0;
text-align: center;
float: left;
}
.tabs li a {
display: block;
height: 30px;
padding: 0 10px;
text-decoration: none;
line-height: 30px;
}
.tabs li.active {
font-weight: bold;
}
.tabs-content {
margin-bottom: 40px;
}
.tabs-content .tabs-panel {
padding: 20px;
}
.tabs-content .tabs-panel .tab-title {
display: none;
}
 @media only screen and (max-width: 767px) {
.tabs li {
display: none;
}
.tabs-content .tabs-panel,  .tabs-content .tabs-panel .tab-title {
display: block;
}
}
#demo .tabs li {
width: 100px;
border: 1px solid #DDD;
border-right: 0;
background: #EEE;
cursor: pointer;
position: relative;
z-index: 999;
}
#demo .tabs li:last-child {
border-right: 1px solid #DDD;
}
#demo .tabs li.active {
border-bottom: 1px solid #FFF;
background: #FFF;
}
#demo .tabs-content {
border: 1px solid #DDD;
background: #FFF;
position: relative;
top: -1px;
z-index: 99;
}
#demo .tabs-content .tab-title {
color: #0b8593;
}

Change log:

2014-07-16

• Updated to v1.4

2014-04-10

• Updated to v1.3

2014-03-13

• version update

2014-02-19

• Updated 'Default Theme' CSS

v1.1 (2014-02-14)

• update

---

This awesome jQuery plugin is developed by joemottershaw. For more Advanced Usages, please check the demo page or visit the official website.