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

Question

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 rows, and turn into some toggle button if a user wants to fold them back.

After understanding there's no way to do this via CSS2 only, I guess that if I want IE8 support as well I would need to use javascript/jquery.

I found a jquery accordion example and tried to implement it on a table, but it didn't really work.

Here's a fiddle

Tried wrapping up the last two rows with a <div class="open">` but it didn't work (barely have knowledge in jquery, just trying to patch this up for a website).

On IE7 if it's impossible, I want all the rows to be collapased from the 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' });
});

[tablesaw.js](https://github.com/filamentgroup/tablesaw) is a javascript library with this capability. makes it really easy, you only edit the tags. [Here's a demo](http://filamentgroup.github.io/tablesaw/demo/toggle.html), yes it has IE8 support — J-Dizzle, Sep 19 '14 at 16:12
@J-Dizzle it needs to collapsible though, something any user can operate right away — rockyraw, Sep 19 '14 at 16:20
@Tengiz which button? for example, I would want that the first visible row, would contain a text like "click to see more rows", and once clicked, more rows appear. — rockyraw, Sep 19 '14 at 16:22
@Tengiz I would rather have some sort of strectching animation, don't think it would make things much harder cross-browser support wise, wouldn't it? — rockyraw, Sep 19 '14 at 16:26

Tengiz · Accepted Answer · 2014-09-19T17:15:04.200

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>

thanks, looks interesting, though how can I choose a different animation such as stretching downwards animations? also, I need the rows to be hidden initially, and collapse when clicking. where do I switch it? — rockyraw, Sep 19 '14 at 16:30
Thanks! I've made [this fiddle](http://jsfiddle.net/gnc6152p/) following your answer, but the animation is not stretching, it is dissolving, do you know how to fix this? — rockyraw, Sep 19 '14 at 19:55
thanks, but I'm interested in hiding the row/cells and not their content, for example, if the cells are padded, they would still be visible when you only hide their content — rockyraw, Sep 19 '14 at 23:28
Can you show me an example of "padded" cells? I think you just should not apply any padding to TD tags, and you should wrap all the insides of the TD tags into DIVs. The reason why we do that is because this animation works very slow on TR and TD http://jsfiddle.net/gnc6152p/3/ — Tengiz, Sep 19 '14 at 23:55

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

1 Answers1

Linked