javascript - How to to make collapsing table rows (with IE8 support also)? -

i want last 2 rows of table folded , collapse when user click on "click here see more rows". appear last row of first 2 rows, , turn toggle button if user wants fold them back.

after understanding there's no way this via css2 only, guess if want ie8 support need use javascript/jquery.

i found jquery accordion example , tried implement on table, didn't work.

here's fiddle

tried wrapping last 2 rows <div class="open">` didn't work (barely have knowledge in jquery, trying patch website).

on ie7 if it's impossible, want rows collapased start.

html:

 <table border="1">     <col style="width:120px;" />     <col style="width:120px;" />     <col style="width:120px;" />     <col style="width:120px;" />     <col style="width:120px;" />     <thead>       <tr>         <th>1</th>         <th>2</th>         <th>3</th>         <th>4</th>         <th>5</th>       </tr>     </thead>     <tbody>       <tr class="open">         <td>a</td>         <td>b</td>         <td>c</td>         <td>d</td>         <td>e</td>       </tr>       <tr>         <td>a</td>         <td>b</td>         <td>c</td>         <td>d</td>         <td>e</td>       </tr>       <tr>         <td>a</td>         <td>b</td>         <td>c</td>         <td>d</td>         <td>e</td>       </tr>     </tbody>   </table> 

javascript:

$(document).ready(function () {     $('table').accordion({collapsible: true,active: false,header: '.open' }); }); 

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

javascript:

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

html:

<table border="1">     <thead>     <tr>         <th>1</th>         <th>2</th>         <th>3</th>         <th>4</th>         <th>5asdfasdfasdf</th>     </tr>     </thead>     <tbody>     <tr class="btn">         <td colspan="5">click me</td>     </tr>     <tr class="hidden">         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>     </tr>     <tr class="hidden">         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>     </tr>     <tr class="hidden">         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>         <td>             <div class="slide">                 asd             </div>         </td>     </tr>     <tr>         <td>a</td>         <td>b</td>         <td>c</td>         <td>d</td>         <td>e</td>     </tr>     </tbody> </table>