How to set separate behaviours for different sets of tabs?

Question

I am developing a functionality where I have different sets of tabs. And I want every set of tabs to behave by itself. I mean: any of the other set of tabs have to interfere with the behaviour of the other sets.

The only error I have in the code so far is that when you click on any of the tabs of the first set, the content of the select tabs of the other sets disappear.

And I need the first tab of every set to be always selected by default.

Here is a JSFiddle I have created.

$(document).ready(function() {

  $('.tabs a:not(:first)').addClass('inactive');
  $('.container').hide();
  $('.tabs').next('.container').show();

  $('.tabs a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
      $(this).siblings('a').addClass('inactive');
      $(this).removeClass('inactive');

      $(this).parent().nextAll('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="tabs">

  <a id="tab1">test1</a>
  <a id="tab2">test2</a>
  <a id="tab3">test3</a>
  <a id="tab4">test4</a>

</div>

<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

<div class="tabs">

  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>

</div>

<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

<div class="tabs">

  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>

</div>

<div class="container" id="tab5C">5Some content</div>
<div class="container" id="tab6C">6Some content</div>
<div class="container" id="tab7C">7Some content</div>
<div class="container" id="tab8C">8Some content</div>

Answer 1

I've removed the ids and replaced them by data-tab, because id should be unique and I wrapped all tabs to get only the clicked scope.

$(document).ready(function() {

  $('.tabs a').addClass('inactive');
  $('.tabs a:first-child').removeClass('inactive');
  $('.tab-container .container').hide();
  $('.tabs').next('.container').show();

  $('.tabs a').on('click', function() {
    var $tabContainer = $(this).parents('.tab-container');
    var tabId = $(this).data('tab');
    
    $tabContainer.find('.tabs a').addClass('inactive');
    $(this).removeClass('inactive');
    
    $tabContainer.find('.container').hide();
    $tabContainer.find('.container[data-tab="'+tabId+'"]').fadeIn('slow');
  });
});

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>

<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>



<div class="tab-container">
  <div class="tabs">
    <a data-tab="tab5">test1</a>
    <a data-tab="tab6">test2</a>
    <a data-tab="tab7">test3</a>
    <a data-tab="tab8">test4</a>
  </div>

  <div class="container" data-tab="tab5">5Some content</div>
  <div class="container" data-tab="tab6">6Some content</div>
  <div class="container" data-tab="tab7">7Some content</div>
  <div class="container" data-tab="tab8">8Some content</div>
</div>

Answer 2

The idea is simple:

Wrap your content with a div just like how you wrap your tabs (otherwise they are all siblings).

Now add inactive to all children of tabs except the 1st child of each tabs

 $(".tabs a:not(:first-child)").addClass('inactive');

Target each div content by .tabs + div (which will find next sibling div) then hide all child that are not 1st child of each div

$(".tabs + div > div:not(:first-child)").hide();

When click on tabs, go to parent then go next div find all child (.container) and hide them, then show the id that clicked.

 $(this).parent().next('div').find('.container').hide();

Also fixed html you have, there are duplicated ids (make sure id are unique)

$(document).ready(function() {
  $(".tabs a:not(:first-child)").addClass('inactive');
  $(".tabs + div > div:not(:first-child)").hide();

  $('.tabs a').click(function() {
    var t = $(this).attr('id');
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
      $(this).siblings('a').addClass('inactive');
      $(this).removeClass('inactive');

      $(this).parent().next('div').find('.container').hide();
      $('#' + t + 'C').fadeIn('slow');
    }
  });

});

.tabs {
  width: 100%;
  height: 30px;
  border-bottom: solid 1px #CCC;
  padding-right: 2px;
  margin-top: 30px;
}

a {
  cursor: pointer;
}

.tabs a {
  float: left;
  list-style: none;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  margin-right: 5px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  outline: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: bold;
  color: #5685bc;
  ;
  padding-top: 5px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 8px;
  display: block;
  background: #FFF;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  text-decoration: none;
  outline: none;
}

.tabs a.inactive {
  padding-top: 5px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 8px;
  color: #666666;
  background: #EEE;
  outline: none;
  border-bottom: solid 1px #CCC;
}

.tabs a:hover,
.tabs a.inactive:hover {
  color: #5685bc;
  outline: none;
}

.container {
  clear: both;
  width: 100%;
  border-left: solid 1px #CCC;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  text-align: left;
  padding-top: 20px;
}

.container h2 {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 10px;
  color: #5685bc;
}

.container p {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.3;
  font-size: small;
}

.container ul {
  margin-left: 25px;
  font-size: small;
  line-height: 1.4;
  list-style-type: disc;
}

.container li {
  padding-bottom: 5px;
  margin-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <a id="tab1">test1</a>
  <a id="tab2">test2</a>
  <a id="tab3">test3</a>
  <a id="tab4">test4</a>
</div>
<div>
  <div class="container" id="tab1C">1Some content</div>
  <div class="container" id="tab2C">2Some content</div>
  <div class="container" id="tab3C">3Some content</div>
  <div class="container" id="tab4C">4Some content</div>
</div>

<div class="tabs">
  <a id="tab5">test1</a>
  <a id="tab6">test2</a>
  <a id="tab7">test3</a>
  <a id="tab8">test4</a>
</div>
<div>
  <div class="container" id="tab5C">5Some content</div>
  <div class="container" id="tab6C">6Some content</div>
  <div class="container" id="tab7C">7Some content</div>
  <div class="container" id="tab8C">8Some content</div>
</div>

<div class="tabs">
  <a id="tab9">test1</a>
  <a id="tab10">test2</a>
  <a id="tab11">test3</a>
  <a id="tab12">test4</a>
</div>
<div>
  <div class="container" id="tab9C">9Some content</div>
  <div class="container" id="tab10C">10Some content</div>
  <div class="container" id="tab11C">11Some content</div>
  <div class="container" id="tab12C">12Some content</div>
</div>