Jquery - Table Row Toggle [SOLVED]
<p>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. </p>

<p>I need some if solution or maybe some toggle solution.</p>

<p>HTML:</p>

<pre><code>&lt;table&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class="clickme"&gt;
                Sample text
            &lt;/td&gt;
            &lt;td class="clickme"&gt;$10&lt;/td&gt;
            &lt;td class="clickme"&gt;$100&lt;/td&gt;
            &lt;td class="clickme"&gt;$0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hideme"&gt;
            &lt;td colspan="4"&gt;
                &lt;div&gt;
                    Sample text, sample text, sample text, sample text, sample text, sample text
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="clickme"&gt;
                Sample text
            &lt;/td&gt;
            &lt;td class="clickme"&gt;$10&lt;/td&gt;
            &lt;td class="clickme"&gt;$100&lt;/td&gt;
            &lt;td class="clickme"&gt;$0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hideme"&gt;
            &lt;td colspan="4"&gt;
                &lt;div&gt;
                    Sample text, sample text, sample text, sample text, sample text, sample text
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="clickme"&gt;
                Sample text
            &lt;/td&gt;
            &lt;td class="clickme"&gt;$10&lt;/td&gt;
            &lt;td class="clickme"&gt;$100&lt;/td&gt;
            &lt;td class="clickme"&gt;$0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hideme"&gt;
            &lt;td colspan="4"&gt;
                &lt;div&gt;
                    Sample text, sample text, sample text, sample text, sample text, sample text
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="clickme"&gt;
                Sample text
            &lt;/td&gt;
            &lt;td class="clickme"&gt;$10&lt;/td&gt;
            &lt;td class="clickme"&gt;$100&lt;/td&gt;
            &lt;td class="clickme"&gt;$0&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="hideme"&gt;
            &lt;td colspan="4"&gt;
                &lt;div&gt;
                    Sample text, sample text, sample text, sample text, sample text, sample text
                &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>Jquery:</p>

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

<p>-- UPDATED -- </p>

<p>The right markup and Jquery is updated. Final JSFiddle: <a href="http://jsfiddle.net/NVx4S/21/" rel="nofollow">http://jsfiddle.net/NVx4S/21/</a></p>
