CODEWITHSUNDEEP
javascriptjquery
Neil
Neil

Reputation: 5178

slideToggle for a table row

According to this post the sliding effect does now work well with tables. I'm trying to figure out a way to implement the slideToggle feature into the code below.

The code below is properly removing/showing the designated contents, but it is not doing it with the slide motion.

The jsfiddle located in the above post solved their situation by putting a div within the td, so for my situation I attempted to put a div inside the <tr> to solve my situation, but it wasn't working. 

$(".one").on('click', function() {
    $(this).nextAll('.two:first').slideToggle(); 
}); 
.one{
    background: orange;
    cursor: pointer;
}
.two{
    background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr class="one">
        <td> Hello </td>
    </tr>
     <tr>
        <td> world </td>
    </tr>
    <tr class="two">
        <td> Foo <br> foo </td>
    </tr>
    <tr class="two">
        <td> Bazz </td>
    </tr>
    <tr class="one">
        <td> Hello </td>
    </tr>
    <tr class="two">
        <td> Bar<br>bar </td>
    </tr>
</table>

Upvotes: 2

Views: 811

Answers (2)

Croc
Croc

Reputation: 157

I don't know if you will put more columns in your code, but I'd recommend you using a < table > only when the information you want to show needs it.

For example in the code you posted here you could(should) nest it just using < div > with display: inline-block; and margin: 0 auto;

Something like:

<div class="one"> Hello </div>
<div class="one"> world </div>
<div class="two"> Foo <br> foo </div>
etc...

If you NEED to work with a table then the link posted by @SarahBourt might be your best option.

Upvotes: 0

lmgonzalves
lmgonzalves

Reputation: 6588

You need to wrap the content inside td elements in a div, and then you can do:

$(this).nextAll('.two:first').find('div').slideToggle();

DEMO

Upvotes: 2

Related Questions