title: Query multiple SlideIn functions based on row number
body: <p>I am looking for information on the best approach to creating a 'more details' section on a table generated by a MySQL query which is something like this:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;th&gt;First Name&lt;/th&gt;
    &lt;th&gt;Surname&lt;/td&gt;
    &lt;th&gt;Details&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;Joe&lt;/td&gt;
    &lt;td&gt;Blogs&lt;/td&gt;
    &lt;td&gt;&lt;a class="button-1" href=""&gt;More Details&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;th class="hidden_details hidden-1" colspan="3"&gt;...insert details...&lt;/th&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Each row has a unique id e.g. button-2,3,4 etc that I can use to create a unique class for each details section and I can hide and show the details using JQuery:</p>
  
  <pre><code>$(document).ready(function() {
      $('.button-1').click(function(){
          var link = $(this);
          $('.hidden-1').slideToggle('slow', function() {
              if ($(this).is(':visible')) {
                   link.text('Hide Details');                
              } else {
                   link.text('More Details');                
              }        
          });       
      });
  });
  </code></pre>
  
  <p>But my knowledge on JQuery is limited so the only way I could think to call the code would be to use php to create multiple versions. If anyone could point my in the direction of the best approach I would be grateful</p>