Question

I have the following:

<table class="site">
<tr>
    <td>
        <span style="float: right;" class='show'>Show More</span>
    </td>
</tr>
<tr class="site_info">
   <td><%= site.id %></td>
</tr>
<tr>
    <td align='right'>
More
    </td>
</tr>
</table>

Anytime someone clicks “.show”, I want it to display “.site_info” (hidden on startup). I’ve tried many things, including:

$('.site_info').hide().css('cursor', 'pointer');
$('.show').click(function() {
    $(this).find('.site_info').slideToggle();
});

I just can’t seem to be able to find/select the site_info portion.

Answer 1

$('.site_info').hide().css('cursor', 'pointer');
$('.show').click(function() {
    $(this).parents( "table" ).find('.site_info').show( "slideToggle" );
});