title: jQuery Tabs with multiple content areas
body: <p>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).</p>
  
  <p>I'm using data- attribute, i've tried to use multiple enteries so i dont have repeat id's but to no avail.</p>
  
  <p>Here's the jQuery for the tabs</p>
  
  <pre><code>$('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(" ");
  </code></pre>
  
  <p>and the HTML:
      </p>
  
  <pre><code>&lt;ul class="tabs"&gt;
      &lt;li class="tab-link current" data-tab="tab-1 tab-5"&gt;Tab One&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-2 tab-6"&gt;Tab Two&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-3 tab-7"&gt;Tab Three&lt;/li&gt;
      &lt;li class="tab-link" data-tab="tab-4 tab-8"&gt;Tab Four&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="tab-1" class="tab-content current"&gt;
      First content area
  &lt;/div&gt;
  &lt;div id="tab-2" class="tab-content"&gt;
       Second content area
  &lt;/div&gt;
  &lt;div id="tab-3" class="tab-content"&gt;
      Third content area
  &lt;/div&gt;
  &lt;div id="tab-4" class="tab-content"&gt;
      Forth content area
  &lt;/div&gt;
  
  &lt;div id="tab-5" class="tab-content current"&gt;
      First content area
  &lt;/div&gt;
  &lt;div id="tab-6" class="tab-content"&gt;
       Second content area
  &lt;/div&gt;
  &lt;div id="tab-7" class="tab-content"&gt;
      Third content area
  &lt;/div&gt;
  &lt;div id="tab-8" class="tab-content"&gt;
      Forth content area
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>ANy ideas?</p>
  
  <p>Here's a working jsFiddle: <a href="https://jsfiddle.net/alexgomy/9tqra6ze/11/" rel="nofollow noreferrer">https://jsfiddle.net/alexgomy/9tqra6ze/11/</a></p>