JQuery dropdown additional info help

I have a table that list users. Each table row has the users Name and Location. I want to be able to click the table row and have additional information about the user appears bel开发者_JAVA技巧ow the table row clicked for the user, without having to refresh the page. I am using the code below but the animation is buggy and i know there has to be a better way of doing this.

       <script type="text/javascript" id="js">$(document).ready(function() {
 // Drop down data on tr click
 $('#users tr').click(function () {
 //Get user ID, must be in first td
    var userID = $(this).find("td:first").html();     
 //Remove any rows being displayed from previous clicks if any
 $('#data-row').remove();
 //Insert a tr and td spanning all rows as a placeholder (display = none, we will animate next)
   $(this).after('<tr id="data-row" style="display:none;"><td id="data-cell" colspan="5"></td></tr>');
 //Show tr created above
 $('#data-row').show('400');
 //Ajax loading image while we wait for load to return
 $('#data-cell').html('<p><img src="_images/ajax-loader-2.gif" width="220" height="19" /></p>');
 //Load in data to tr td
   $('#data-cell').load('admin/main/user_info_box.php?userID='+userID);
 });
 //Removes Data if Header is clicked to sort rows
 $('th').click(function () {
  $('#data-row').remove();          
 });
}); 
</script>

You could load all of the users info at the start and .hide() it all, then do .slideToggle() on a click rather than separate AJAX calls