hide show details with jquery

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!

I'd say this would be the best way to do something like this; But if anyone else has a better option, I'd like to see that as well. — rgin, Oct 06 '11 at 12:20

score 1 · Accepted Answer · answered Oct 06 '11 at 12:29

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).

answered Oct 06 '11 at 12:29

picus

1,507
2
13
23

I used this one: https://github.com/mathiasbynens/jquery-details to make it work for more browsers – edelwater Jan 26 '13 at 12:38

score 0 · Answer 2 · answered Oct 06 '11 at 12:58

0

One thing I would add would be to use JQuery to do the initial hiding rather than inline CSS.

instead of:

<div style='display: none;' class="divDetail">
             // hidden div with some detail's
        </div>

do

$('.divDetail').hide();

answered Oct 06 '11 at 12:58

martincarlin87

10,848
24
98
145

hide show details with jquery

2 Answers2