How To To Make Collapsing Table Rows (with Ie8 Support Also)?

I want the last two rows of a table to be folded and collapse when user click on something like 'Click Here to see more rows'. that would appear as the last row of the first two ro

Solution 1:

http://jsfiddle.net/4rkkksmd/4/

javascript:

$('tr.btn td').click(function(){
    $('tr.hidden .slide').toggle(200)
});

html:

<tableborder="1"><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5asdfasdfasdf</th></tr></thead><tbody><trclass="btn"><tdcolspan="5">Click me</td></tr><trclass="hidden"><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td></tr><trclass="hidden"><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td></tr><trclass="hidden"><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td><td><divclass="slide">
                asd
            </div></td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr></tbody></table>