all divs in my jquery code

Question

I have 3 html box as follow:

<div class="tabs">
  <ul class="tabNav">
    <li><a href="#video">Video Gallery</a></li>
    <li><a href="#photo">Photo Gallery</a></li>
  </ul>
  <div  id="video"> video div </div>
  <div  id="photo"> photo div </div>
</div>
 <div class="tabs">
  <ul class="tabNav">
    <li><a href="#comment">comment</a></li>
    <li><a href="#links">links</a></li>
  </ul>
  <div  id="comment"> comment div </div>
  <div  id="links"> links div </div>
</div>

for show and hide tabs i used this jquery code:

$(function () {
     var container = $('div.tabs > div');
     container.hide().filter(':first').show();

     $('div.tabs ul.tabNav a').click(function () {
     container.hide();
     container.filter(this.hash).show();
     $('div.tabs ul.tabNav a').removeClass('selected');
     $(this).addClass('selected');
     return false;
     }).filter(':first').click();
  });

This code only works with firts box (gallery) and with page load, the comment and links are also hidden. How can I solve this? Thanks in advance

Answer 1

What exactly are you trying to do here?

Answer 2

If I understand you correctly, you want those tabs to work separately of each other, i.e select photo and links at the same time so photo div and links div will be shown. In your code you operate in joined environment, you can select any of those four divs but only one of them will be shown. In order to operate div.tabs separately, following code will work:

$(function () {
   $('div.tabs').each(function(i, tabs) {
      var container = $('div', tabs);
      container.hide().filter(':first').show();

      $('ul.tabNav a', tabs).click(function () {
          container.hide();
          container.filter(this.hash).show();
          $('ul.tabNav a', tabs).removeClass('selected');
          $(this).addClass('selected');
          return false;
      }).filter(':first').click();
   });
});

Note that at first it selects div.tabs and then do it's magic inside that div for each of them.