单击按钮显示/隐藏元素

Question

I got table like this:

<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>
<tr>
    <td class="title">Title</td>
    <td class="body">Body</td>
    <td class="any">Any text</td>
</tr>

I'm using this script to hide/show td="body"

$('.title').append("<button class='moredrop'>&darr;</button>");
$(".moredrop").click(function(){
    $(".body").toggle();

It shows and hides all td's in table. I want it to hide/show only this td like here:

     $("tr").toggle(
    function(){$(".body",this).css("display","block");},
    function(){$(".body",this).css("display","none");});

But on button click. Any ideas?

Answer 1

Search the containing TR and then go to the specific .body

$('.moredrop').on('click', function () {
    $(this).closest('tr').find('.body').toggle();
});

Answer 2

Try this :

$(document).ready(function(){
    $('.title').append("<button class='moredrop'>&darr;</button>");
    $('tr').on('click','.moredrop',function(){
            $(this).parents('tr').children('.body').toggle();
    });
});

Here is the working demo .

Answer 3

$('.moredrop').click(function(){
    $('td.body').toggle();
});