CODEWITHSUNDEEP
jqueryhtml
user1949490
user1949490

Reputation: 21

jQuery slideToggle on a table

<table id="main_table">     
        <tr style="background-color:green; color:white">
            <td class="flip"> Section 1 </td>
        </tr> 
    <tr>
        <td>
            <table class="section">
                <tr>
                    <td>item 111</td>
                    <td>item 112</td>
                    <td>item 113</td>
                    <td>item 114</td>
                </tr> 
            </table>
        </td>
    </tr>   
</table>

$('.flip').click(function() {
    $(this)
        .closest('table')
        .next('.section')
        .toggle('fast');
});

Can someone help me to correct above code I tried slidetoggle but dunno why it is not working

thanks

Upvotes: 0

Views: 236

Answers (3)

Amit
Amit

Reputation: 15387

Try this

$('.flip').on('click',function() {
 $(this)
 .closest('tr').next('tr')
 .find('.section')
 .toggle(200);
});

Reference

Upvotes: 0

Adil
Adil

Reputation: 148110

You can use tr instead of table to get the next row and use find() to get .section

$('.flip').click(function() {
    $(this)
        .closest('tr')
        .next('tr')
        .find('.section')
        .toggle('fast');
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388326

the section element is a child of the next tr element

$('.flip').click(function() {
    $(this)
        .closest('tr').next()
        .find('.section')
        .toggle('fast');
});

Demo: Fiddle

Upvotes: 0

Related Questions