JQuery for duplicate tabs
I am trying to create tabs in jquery and was successful. However, there is one problem that I cannot solve and that is the duplicate tabs.
With one tab, jquery works fine, but when I copy and paste that tab, it doesn't work correctly. I added some extra code to find the tab currently in use using the closest function, but still no result.
Take a look at the code.
// HTML
<div class="tabsContainer">
<ul class="tabs-nav">
<li>
<a href="#tab1" class="active">Tab One</a>
</li>
<li>
<a href="#tab2">Tab Two</a>
</li>
<li>
<a href="#tab3">Tab Three</a>
</li>
</ul>
<section class="tabs-content">
<div class="tabs active" id="tab1">
This is tab 1<br />
This is tab 1<br />
This is tab 1<br />
</div>
<div class="tabs" id="tab2">
This is tab 2<br />
This is tab 2<br />
This is tab 2<br />
</div>
<div class="tabs" id="tab3">
This is tab 3<br />
This is tab 3<br />
This is tab 3<br />
</div>
</section>
</div>
//2nd tab
<div class="tabsContainer">
<ul class="tabs-nav">
<li>
<a href="#tab1" class="active">Tab One</a>
</li>
<li>
<a href="#tab2">Tab Two</a>
</li>
<li>
<a href="#tab3">Tab Three</a>
</li>
</ul>
<section class="tabs-content">
<div class="tabs active" id="tab1">
This is tab 1<br />
This is tab 1<br />
This is tab 1<br />
</div>
<div class="tabs" id="tab2">
This is tab 2<br />
This is tab 2<br />
This is tab 2<br />
</div>
<div class="tabs" id="tab3">
This is tab 3<br />
This is tab 3<br />
This is tab 3<br />
</div>
</section>
</div>
CSS code
.tabsContainer{
overflow:hidden;
}
.tabs-nav{
overflow:hidden;
margin:0;
padding:0;
list-style:none;
}
.tabs-nav li {
display: inline-block;
background: #34495E;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #34495E;
margin-right: 5px;
}
.tabs-nav li a {
display: block;
padding: 10px 15px;
font-weight: bold;
color: #fff;
}
.tabs-nav li a.active {
background: #FFF;
}
.tabs-nav li a.active {
color: inherit;
}
.tabs-content {
border: 1px solid #34495E;
padding: 10px;
background: #FFF;
margin-top: -1px;
overflow:hidden;
}
.tabs-content .tabs{
overflow:hidden;
display:none;
margin:0 0 30px;
}
.tabs-content .tabs.active{
display:block;
}
JavaScript
$(function() {
//listeing for click events
$('.tabsContainer .tabs-nav li a').on('click', function(){
//if more than 1 tab find out which tab you are currently in using the closest function
//by clicking on the a tag it will find which container it is a part of.
var $tab = $(this).closest('.tabsContainer');
$tab.find('.tabs-nav li a.active').removeClass('active');
$(this).addClass('active');
//grabbing the tab which is clicked using the attribute "href"
var currentClick = $(this).attr('href');
//hiding the current panel
//using a call back function. What this does is wait for the slideup to finish and then it will excute the call back function
$tab.find('.tabs-content .tabs.active').slideUp(300, nextTab);
//the call back function to show the new tab
function nextTab(){
$(this).removeClass('active');
$(currentClick).slideDown(300, function(){
$(this).addClass('active');
});
}
});
});
source to share
Yours $(currentClick)
will select items starting with body
, since you won't specify a parent area. Therefore, if the value currentClick
is equal #tab1
, the selection result is obtained from the first tab and not from the current parent a
.
I prefer to wrap the tab handling in each tab area. Example:
$('.tabContainer').each(function() {
var tab = $(this);
// Do the tab processing here.
});
See JSFiddle sample .
source to share
I figured out the problem, rookie made a mistake in html. In both tab containers, I have not changed the href tag. In the 1st tab container, these are # tab1, # tab2, # tab3. This is the same in the second container that was causing the problem, the tab numbering should be different. This is why tabs don't work as expected.
@Nanang Mahdaen El-Agu Thanks for your code, I learned something new with your help :)
source to share