CODEWITHSUNDEEP
javascriptjquery
rigelstpierre
rigelstpierre

Reputation: 544

Hiding and Showing Tabs in Jquery

I've created a simple interface with Tabs on the left and an image that's sliding on the right. I'm having a hard time figuring out how to hide the old image (stored in the div) and show the new one in a clean way. I've posted the HTML and jQuery below. Any thoughts would be appreciated 

 var resource_box = $('.resource-box')
  resource_box.find('div').not('.selected').each(function(){
    $(this).css('display', 'none'); // Hides all the Content for Each UL
  });

  var tabs = $('.names ul');
  $('.names ul li').click(function () {
      tabs.find('li').each(function(){
        $(this).removeClass('selected')
      });
    $(this).addClass('selected');
    var tabId = $(this).attr('id');
    $('.resource_box').find(tabId)


  });

<div class="container gallery-container">

      <div class="names">
        <ul>
          <li id="vector-icon-packs" class="selected">Vector Icon Packs</li>
          <li id="user-interface-kit">User Interface Kits</li>
          <li id="vector-illustrations">Vector Illustrations</li>
          <li id="high-res-textures">High-Res Textures</li>
          <li id="premium-brushes">Premium Brushes</li>
          <li id="print-templates">Print Templates</li>
          <li id="mockups">Mockups</li>
        </ul>
      </div>
      <div class="grid items resource-box">
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="vector-icon-packs" class="selected"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="user-interface-kit"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="vector-illustrations"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="high-res-textures"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="premium-brushes"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="print-templates"></div>
        <div style="background: url(http://f.cl.ly/items/3A1U223S1A0k47361G1G/icons.png);" id="mockups"></div>
      </div>
    </div>

Upvotes: 0

Views: 112

Answers (1)

Andy
Andy

Reputation: 14575

Your elements share ID's, which is not allowed, try this:

$('.names ul li').click(function(){
  $('.resource-box div').hide();                      // hides all divs
  $('.resource-box div').eq($(this).index()).show();  // shows correct one
});

The key part of the code is eq($(this).index()), which grabs the index (what number child the list item is) and then uses that to decide which div to show. Of course, this means they have to be in the same order

Upvotes: 1

Related Questions