Question

i have a table that each row have a detail to show.

so, when user mouseover’s, detail will apear.

i made this:

html:

   <tr>    
      <td class="tdMsg">
            <span class='showDetail'/>Show</span>
            <div style='display: none;' class="divDetail">
                 // hidden div with some detail's
            </div>
     </td>
  </tr>

js:

$(".showDetail").live("mouseover", function(){
    $(".divDetail").hide();
    $(this).next().stop(true,true).fadeIn('fast');
});

$(".showDetail").live("mouseout", function(){
    $(".divDetail").hide();
});

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.

ps.: this was a fast example to explain what i’m trying to do, ignore the mouseover/mouseout separated with live.

thanks!

Answer 1

Maybe have the show anchor and the details in two separate td’s? and show/hide the details td content (innerHTML). That way you are limiting the divs.

In the future you might consider the <details> tag for HTML5, it is meant for toggle-able content. But right now only Chrome really does anything with it (hides it automatically).