jQuery core tabs script - multiple instances?

Question

I have the following jQuery script on my site to switch tabs without reloading the page. I'm using jQuery core v1.3.2 (NOT jQuery UI)

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabify = function () {
            var id = $('#content > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('id');
            $('#content > ul > li').removeClass('selected').find('a[href=#' + id + ']').parent().addClass('selected');
        }
        setInterval(tabify, 100);
        tabify();
    });
</script>

<!-- HTML -->
<div id="content">

  <ul>
    <li><a href="#blog" role="tab">Blog</a></li>
    <li><a href="#videos" role="tab">Videos</a></li>
    <li><a href="#photos" role="tab">Photos</a></li>
  </ul>            

  <div id="blog" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Blog Content</div>
  <div id="videos" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Videos Content</div>
  <div id="photos" role="tabpanel" aria-labelledby="tab3" aria-hidden="true">Photos Content</div>                       

</div>

I want to add another instance of this script on the same page, but just copy/pasting this with different variable names doesn't work. Any ideas?

EDIT: Here is my HTML and JS for the second instance. The problem is when I click on a tab in the second instance, it hides all the content divs in the first instance, and vice versa. I want them to be independent of one another.

<!-- JS -->
<script type="text/javascript">
    $(function() {
        var tabifyplayer = function () {
            var idplayer = $('#discography > div').hide().attr('aria-hidden', 'true').filter(window.location.hash || ':first').show().attr('aria-hidden', 'false').attr('idplayer');
            $('#discography > ul > li').removeClass('selected').find('a[href=#' + idplayer + ']').parent().addClass('selected');
        }
        setInterval(tabifyplayer, 100);
        tabifyplayer();
    });
</script>

<!-- HTML -->
<div id="discography">
  <ul>
    <li><a href="#cor-player" role="tab">Chance of Rain (2009)</a></li>
    <li><a href="#debutcd-player" role="tab">Debut CD (2007)</a></li>
  </ul>

  <div id="cor-player" role="tabpanel" aria-labelledby="tab1" aria-hidden="false">Content Goes Here</div>
  <div id="debutcd-player" role="tabpanel" aria-labelledby="tab2" aria-hidden="true">Content Goes Here</div>
</div>

g.d.d.c · Answer 1 · 2010-07-04T23:47:41.063

You have a number of regions in your code where you've hard-coded elements. I imagine you intend to use another container for the new tabs set, so you'll want to make sure that you change those parts of the code if you're going for a minimum amount of alteration.

<script type="text/javascript">
  $(function() {
    var tabify = function () {
      var id = $('#content > div') // Hard Coded content container.
                .hide()
                .attr('aria-hidden', 'true')
                .filter(window.location.hash || ':first')
                .show()
                .attr('aria-hidden', 'false')
                .attr('id');
      $('#content > ul > li') // Hard Coded tab elements.
        .removeClass('selected')
        .find('a[href=#' + id + ']')
        .parent()
        .addClass('selected');
    }
    setInterval(tabify, 100);
    tabify();
  });
</script>

Really though, you're probably better served by adjusting everything a little bit so that you're not relying on an interval.

$(function () {
  var mine = $('#content > ul > li > a').click(function () {
    $(this)
      .parent()
      .addClass('selected')
      .siblings('li')
      .removeClass('selected');

    $('#content > div')
      .filter($(this).attr('href') || ':first')
      .show().attr('aria-hidden', 'false')
      .siblings('div')
      .hide().attr('aria-hidden', 'true');
  });

  if (window.location.hash != undefined) {
    mine.filter('[href=' + window.location.hash + ']').click();
  } else {
    mine.filter(':first').click();
  }
});

I believe that second example should come close to achieving the same (though seeing your HTML Structure would help me to verify that) and will be easier to adapt for another set of elements.

I have updated my question with all the relevant code. Your suggestion results in some wonky navigation, whereby the clicked tab doesn't give you the correct div. — Sam Nabi, Jul 04 '10 at 17:39
@sam-nabi - Thanks for adding some extra code. I've tweaked my approach slightly (`filter($(this).attr('href') || ':first'`) to address what I think is causing the odd navigation. Please let me know if that helps. — g.d.d.c, Jul 04 '10 at 22:12
We're getting there... it works well (with both instances) except for three things: 1. On page load, all the divs are expanded. Only the first div should be shown; the others should be hidden. 2. Clicking on a tab makes the page scroll down to the appropriate anchor. Is there a way to keep the window position where it is? 3. Pressing the back button does nothing. It should go to the previously loaded tab. Sorry if these are trivial things; I've yet to wrap my head around PHP! — Sam Nabi, Jul 04 '10 at 23:27
@sam-nabi - I've made a few more edits. Does that resolve some of the errant behavior you describe? Also, this is not PHP, this is Javascript. — g.d.d.c, Jul 04 '10 at 23:48
Javascript, right. It's been a long day. Unfortunately your changes don't seem to have made any difference... — Sam Nabi, Jul 04 '10 at 23:56

score 0 · Accepted Answer · edited May 23 '17 at 12:01

I found a good solution on this page: jQuery tabs - multiple sets on on page

There's less code duplication this way, too. (Only thing it doesn't do is let you use the back button, but I can live with that.)

jQuery.fn.minitabs = function(speed,effect) {
  var id = "#" + this.attr('id')
  $(id + ">div:gt(0)").hide();
  $(id + ">ul>li>a:first").addClass("selected");
  $(id + ">ul>li>a").click(
    function(){
      $(id + ">ul>li>a").removeClass("selected");
      $(this).addClass("selected");
      $(this).blur();
      var re = /([_\-\w]+$)/i;
      var target = $('#' + re.exec(this.href)[1]);
      var old = $(id + ">div");
      old.hide();
      target.show()
      return false;
    }
 );
}
$('#tabset1').minitabs();
$('#tabset2').minitabs();

jQuery core tabs script - multiple instances?

2 Answers2