I've searched around on stackoverflow and can't seem to find what i'm after. I'm looking to do a simple jQuery tabbed section. 1 lot of tabs controlling multiple content areas (rather than the standard 1 area that switches).
I'm using data- attribute, i've tried to use multiple enteries so i dont have repeat id's but to no avail.
Here's the jQuery for the tabs
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
var tab = $("li").data("tab").split(" ");
and the HTML:
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1 tab-5">Tab One</li>
<li class="tab-link" data-tab="tab-2 tab-6">Tab Two</li>
<li class="tab-link" data-tab="tab-3 tab-7">Tab Three</li>
<li class="tab-link" data-tab="tab-4 tab-8">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
First content area
</div>
<div id="tab-2" class="tab-content">
Second content area
</div>
<div id="tab-3" class="tab-content">
Third content area
</div>
<div id="tab-4" class="tab-content">
Forth content area
</div>
<div id="tab-5" class="tab-content current">
First content area
</div>
<div id="tab-6" class="tab-content">
Second content area
</div>
<div id="tab-7" class="tab-content">
Third content area
</div>
<div id="tab-8" class="tab-content">
Forth content area
</div>
So intial load is fine but when you click on any tab the 2nd content area disappears rather than switching like the first content area.
ANy ideas?
Here's a working jsFiddle: https://jsfiddle.net/alexgomy/9tqra6ze/11/
Here is a Solution without id's (https://jsfiddle.net/L24qrbpj):
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("."+tab_id).addClass('current');
})
})
body {
margin-top: 100px;
line-height: 1.6;
}
.container {
width: 800px;
margin: 0 auto;
}
ul.tabs {
margin: 0 0 20px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current {
background: #ededed;
color: #222;
}
.tab-content {
display: none;
background: #ededed;
padding: 15px;
margin:0 0 30px;
}
.tab-content.current {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div class="tab-1 tab-content current">
First content area
</div>
<div class="tab-2 tab-content">
Second content area
</div>
<div class="tab-3 tab-content">
Third content area
</div>
<div class="tab-4 tab-content">
Forth content area
</div>
<div class="tab-1 tab-content current">
First content area AVB
</div>
<div class="tab-2 tab-content">
Second content area AVB
</div>
<div class="tab-3 tab-content">
Third content area AVB
</div>
<div class="tab-4 tab-content">
Forth content area AVB
</div>
</div><!-- container -->