jquerytabs

jQuery Tabs with multiple content areas


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/


Solution

  • 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 -->