title: Use javascript / jQuery to show the next tr when another tr is clicked on
body: <p>I'm creating an admin page that displays a list of user registrations pending approval. I have a table that lists the username and an approve / deny checkbox for each user (which I'll probably change to radio buttons). There's a table row below each listed user that's hidden that shows their details (full name, enroll date, etc).</p>
  
  <p>What I want is to click on the tr with the username, and have the hidden tr below it to show with all the details, and then when you click on the no longer hidden tr, it hides again.</p>
  
  <p>What it's actually doing is showing all the hidden tr's when I click on a tr with a username, and then if I click on one of the previously hidden tr's, that specific tr hides.</p>
  
  <p>Is there a way to use the index + 1 to tell it which hidden tr to show? Or is there a way to do this with the first-child feature? Or is there a better way to do this? </p>
  
  <p>I can't use specific class names with the hidden tr's, because there's no way of knowing how many pending users there will be when the page loads (it's all pulled from a db).</p>
  
  <p>Here's the code that I have:</p>
  
  <pre><code>&lt;?php
    for ($output_user = 0; $output_user &lt;= $num_pending - 1; $output_user++)
    {
      echo "\n\t&lt;tr class=\"pending_users\"&gt;\n\t\t&lt;td class=\"admin\"&gt;".$pending_user[$output_user][0]."&lt;/td&gt;";
      echo "\n\t\t&lt;td class=\"m_1\"&gt;&lt;input type=\"checkbox\" value=\"approve\"/&gt;&lt;/td&gt;";
      echo "\n\t\t&lt;td class=\"m_l\"&gt;&lt;input type=\"checkbox\" value=\"deny\"/&gt;&lt;/td&gt;";
      echo "\n\t&lt;/tr&gt;";
      echo "\n\t&lt;tr class=\"showhide\"&gt;\n\t\t&lt;td class=\"admin\" colspan=\"3\"&gt;Name:".$pending_user[$output_user][1]." ".$pending_user[$output_user][2]."\nEmail: ".$pending_user[$output_user][3]."\nEnrol Date: ".$pending_user[$output_user][4]."&lt;/td&gt;\n\t&lt;/tr&gt;";
      echo "\n\t&lt;/tr&gt;";
    }
  ?&gt;
  &lt;script&gt;
   $(document).ready(function() {
    //Hides specific user details when the page loads
    $("div.show_user_info tr.showhide:visible").hide();
  
    //Makes every other row another bgcolor - effects pending user table only
    $("tr.pending_users:odd").css("background-color", "#ffff00");
   });
  
   $("td.admin").click(function () {
    $("div.show_user_info tr.showhide:hidden").slideDown("slow");
   });
  
   $("tr.showhide").click(function () {
  
    $(this).slideUp("slow");          
   });
  &lt;/script&gt;
  </code></pre>