Have multiple jquery tabs on the same page

Question

I really need some help with jquery tabs. I have found some answers to the question I'm about to ask, but the issue is that most jquery tabs uses "a" tag for navigation and I spent time to get mine to work without "a" tag. I want to keep it that way for a very good reason.

Here's my question. I have a jquery tab that works very well. But when I try to put more than one tab in the same page, it contradicts each other.

Here's a link to jsfiddle. I tried to duplicate the jquery code and change the IDs and classes to conform with the second tab, but can't seem to get it to work.

Imagine I have 5 content sections on my homepage and I want section 2 and 5 to have tabs.

Here's the css:

#tabs-nav-wrap {padding:10px 0; text-align: center;}
#tabs-nav-wrap ul {display: inline-block; list-style: none;}

#tabs-nav-wrap ul li {
  list-style: none;
  display: inline-block;

  margin:0 3px;
}
#tabs-nav li {
  list-style: none;
  display: block;
  padding:10px 20px;
  background: #736565;
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  color: #fff;
  text-align: left;
  text-decoration: none;
  border:1px solid #615656;
}

#tabs-nav .tab-nav-link.current,
#tabs-nav .tab-nav-link:hover {
  border:1px solid #5eaace;
  background: #74c1e4;
}

.tab-content {padding:20px 0; text-align: center;}

Here's the HTML:

    <div id="tabs-nav-wrap">
        <ul id="tabs-nav">
            <li class="tab-nav-link" data-target="#tab-one">TAB 1</li>
            <li class="tab-nav-link" data-target="#tab-two">TAB 2</li>
            <li class="tab-nav-link" data-target="#tab-three">TAB 3</li>        
         </ul>
       <div style="clear:both;"></div>
     </div><!-- ends tabs-nav-wrap -->    


 <div class="tabs-main-content">

      <div id="tab-one" class="tab-content"><!-- Begins tab-one -->
         <div class="tab-inner">
            <p>Tab 1 content here.</p>
         </div>
      </div>

      <div id="tab-two" class="tab-content"><!-- Begins tab-two -->
         <div class="tab-inner">
            <p>Tab 2 content here.</p>
         </div>
      </div>

      <div id="tab-three" class="tab-content"><!-- Begins tab-three -->
         <div class="tab-inner">
            <p>Tab 3 content here.</p>
         </div>
      </div>    

    <div style="clear:both;"></div>
  </div><!-- # tabs-main-content -->    

Here's what my jquery code looks like:

$(function() {
  $('.tab-content:not(:first)').hide();
  $('#tabs-nav .tab-nav-link').bind('click', function(e) {
    $this = $(this);
    $target = $($this.data("target")); // get the target from data attribute
    $('#tabs-nav .tab-nav-link.current').removeClass('current');
    $('.tab-content:visible').fadeOut("fast", function() {
      $this.addClass('current');
      $target.fadeIn("fast");
    });
  }).filter(':first').click();
});

I really need some help. Thanks in advance!

Answer 1

Use class instead of id, they are unique selectors and you want to handle multiple tabs with same code. Also use siblings() to hide or remove class who are not active element. here is updated fiddle