title: hide show details with jquery
body: <p>i have a table that each <strong>row</strong> have a detail to show.</p>
  
  <p>so, when user mouseover's, detail will apear.</p>
  
  <p>i made this:</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>   &lt;tr&gt;    
        &lt;td class="tdMsg"&gt;
              &lt;span class='showDetail'/&gt;Show&lt;/span&gt;
              &lt;div style='display: none;' class="divDetail"&gt;
                   // hidden div with some detail's
              &lt;/div&gt;
       &lt;/td&gt;
    &lt;/tr&gt;
  </code></pre>
  
  <p><strong>js:</strong></p>
  
  <pre><code>$(".showDetail").live("mouseover", function(){
      $(".divDetail").hide();
      $(this).next().stop(true,true).fadeIn('fast');
  });
  
  $(".showDetail").live("mouseout", function(){
      $(".divDetail").hide();
  });
  </code></pre>
  
  <p>but i wanna know if are any better way to do this instead puting a div in each row that need a detail, maybe using append or any other.</p>
  
  <p>ps.: this was a fast example to explain what i'm trying to do, ignore the mouseover/mouseout separated with live.</p>
  
  <p>thanks!</p>