title: How to hide div only for corresponding divs
body: <p>I am creating a simple tab where I am showing some static text and few products which are dynamically created. So by default I am showing all the products. I want to hide one products in case of tab 1, 2, 3 out of total five tabs. This is the script for the tab. </p>
  
  <p>Any ideas?</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
          $('.content:first-child').show();
              $('.listThumbClick').live('click', function(){
              var ind = $('.listThumbClick').index(this);
              $('.content').eq(ind).show().siblings().hide(); 
          });
          //generated product is attached inside the tab
          $('.product').appendTo('.content');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the html somewhat looks like this. Note: I am appending the products into the tab area</p>
  
  <pre><code>&lt;div class="ppt"&gt;
      &lt;div class="listThumbClick"&gt;&lt;/div&gt;
      &lt;div class="listThumbClick"&gt;&lt;/div&gt;
      &lt;div class="listThumbClick"&gt;&lt;/div&gt;
      &lt;div class="listThumbClick"&gt;&lt;/div&gt;
      &lt;div class="listThumbClick"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="tabContainer"&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="product"&gt;
      &lt;img src="product image source here" title="productOne"/&gt;
  &lt;/div&gt;
  &lt;div class="product"&gt;
      &lt;img src="product image source here" title="productTwo"/&gt;
  &lt;/div&gt;
  </code></pre>