title: JQuery toggle rows on click
body: <p>I'm trying to hide/show a subset of rows when clicking a row with a specific id. </p>
  
  <p>Through a lot of searching the web and a lot of tries I got the code below.</p>
  
  <p>Only problem is this code for some reason only hides/shows the very first set of rows.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" &gt;
  
  &lt;head&gt;
             &lt;title&gt;Test&lt;/title&gt;
  
             &lt;script src="http://code.jquery.com/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
             &lt;script type="text/javascript"&gt;
  
               $(document).ready(function()
               {
                   $('#rowToClick').click(function ()
                   {
                       $(this).nextAll('tr').each( function()
                       {
                           if ($(this).is('#rowToClick'))
                          {
                             return false;
                          }
                          $(this).toggle();
                       });
                   });
               });
             &lt;/script&gt;
           &lt;/head&gt;          
  
  &lt;body&gt;
  &lt;table&gt;
      &lt;tr id="rowToClick"&gt;&lt;td&gt;ClickMe&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr1"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr2"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr3"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr4"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr5"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="rowToClick"&gt;&lt;td&gt;ClickMe&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr6"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr7"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr8"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr9"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="Tr10"&gt;&lt;td&gt;Toggled&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Anyone has a suggestion and/or possible rewrite of the code?</p>
  
  <p><strong>---------- Update - Final solution -----------</strong></p>
  
  <p>I ended up with the solution below based on Brandon's input, as I wanted to do more nesting with the same behaviour, kind of like a collapsible tree view.
  Unfortunately that meant I had to add an extra attribute to keep track of the state, but I can live with that for now, until I find another way (ex. check visibility of the next row).</p>
  
  <pre><code>         $(document).ready(function () {
               toggleRows('.module','.namespace');
               toggleRows('.namespace','.type');
               toggleRows('.type','.member');
           });
  
           function toggleRows(parentClass,subClass)
           {
              $(parentClass).click(function () {
  
                  if( $(this).attr("value")=="collapsed")                 
                  {
                    $(this).attr("value","expanded");
                    $(this).nextUntil(parentClass).filter(subClass).toggle(true);
                  }
                  else
                  {
                    $(this).attr("value","collapsed");
                    $(this).nextUntil(parentClass).attr("value","collapsed");
                    $(this).nextUntil(parentClass).toggle(false);
                  }       
  
              });
           }
  </code></pre>