title: jquery hide show or toggle div loop naming need solution
body: <p>I have a simple hide show jquery script I grabbed from an example site.  I am trying to traverse through using $(this). to target the divs I want to hide/show.  I have been able to make this work for the first goruping, anything after the first fails.  I have tinkered with the code so I have a few examples of failure below to help decern what it is I am trying to do. Here is the code.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  //$(document).ready(function(){
  //  $("#hide").click(function(){
  //    $(this).('#hideShowParent &gt; #hideShow').hide();
  //  });
  //  $("#show").click(function(){
  //    $(this).('#hideShowParent &gt; #hideShow').show();
  //  });
  //});
  $(document).ready(function(){
  $("#hide").click(function(){
      $(this).find().parent("#hideShowParent").sibling("#hideShow").hide();
  });
  $("#show").click(function(){
      $(this).find().parent("#hideShowParent").sibling("#hideShow").hide();
  }); 
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>now i am looping over something that may have one or two or more.  I would like for my jQuery to target the parent of the clicked button, find the sibling div called hideShow in the closest proximity below and hide or show (could use toggle too.</p>
  
  <pre><code>&lt;div id="hideShowParent"&gt;
  &lt;ul&gt;
  &lt;li&gt;
      &lt;button id="show"&gt;Show&lt;/button&gt; 
      - &lt;button id="hide"&gt;Hide&lt;/button&gt; 
      &lt;b&gt;Medium&lt;/b&gt;
          &lt;div id="hideShow"&gt;
  
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
                      &lt;/tr&gt;            
                      &lt;tr&gt;&lt;td height="15px"&gt;somethingn textual&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt; 
  
          &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="hideShowParent"&gt;
  &lt;ul&gt;
  &lt;li&gt;
      &lt;button id="show"&gt;Show&lt;/button&gt; 
      - &lt;button id="hide"&gt;Hide&lt;/button&gt; 
      &lt;b&gt;Medium&lt;/b&gt;
          &lt;div id="hideShow"&gt;
  
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
                      &lt;/tr&gt;            
                      &lt;tr&gt;&lt;td height="15px"&gt;somethingn textual&lt;/td&gt;&lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;hr /&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt; 
  
          &lt;/div&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks in advance for the help. I hope all this make sense.</p>