CODEWITHSUNDEEP
jquery
Hardan
Hardan

Reputation: 13

Table Row Toggle in jQuery

I have been stuck with this problem for a while now. I know that for table rows to animate smoothly you need divs. And I came over this solution where I can hide the tablerow I want, but I cannot make it appear again.

I need some if solution or maybe some toggle solution.

HTML:

<table>
    <tbody>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
        <tr>
            <td class="clickme">
                Sample text
            </td>
            <td class="clickme">$10</td>
            <td class="clickme">$100</td>
            <td class="clickme">$0</td>
        </tr>
        <tr class="hideme">
            <td colspan="4">
                <div>
                    Sample text, sample text, sample text, sample text, sample text, sample text
                </div>
            </td>
        </tr>
    </tbody>
</table>

Jquery:

$('.hideme').find('div').hide();
$('.clickme').click(function() {
    $(this).parent().next('.hideme').find('div').slideToggle(500);
    return false;        
});

The right markup and Jquery is updated. Final JSFiddle: http://jsfiddle.net/NVx4S/21/

Upvotes: 1

Views: 13144

Answers (2)

Luca Filosofi
Luca Filosofi

Reputation: 31173

<table>
    <tbody>
        <tr>
            <td id="content-1" class="clickme">
                Sample text
                <!-- <a href="#content-1" class="clickme">Sample text</a> -->
            </td>
            <td>$10</td>
            <td>$100</td>
            <td>$0</td>
        </tr>
        <tr>
           <td colspan="4">
               <div id="slide-content-1">
                  Sample text, sample text, sample text, sample text, sample text, sample text
               </div>
           </td>
        </tr>
    </tbody>
</table>​

    $('.clickme').click(function() {
        //$(this.hash).slideToggle(500);
        $('#slide-'+this.id).slideToggle(500);
        return false;        
    });

Upvotes: 3

Thomas
Thomas

Reputation: 593

I edited your JSFiddle a little bit. Does it help you?

http://jsfiddle.net/NVx4S/7/

Upvotes: 0

Related Questions