How to implement collapsible table rows in Javascript?

Question

I'd like to have tables that can dynamically collapse some rows in a web page, such as:

    |   Title   |   Foo   |   Bar   |
    ---------------------------------
    | + My First Section            |
    ---------------------------------
    | + My Second Section           |
    ---------------------------------

can dynamically expand to

    |   Title   |   Foo   |   Bar   |
    ---------------------------------
    | - My First Section            |
    ---------------------------------
    | 1st Title |    42   |  $10.00 |
    ---------------------------------
    | 2nd Title |    74   |  $12.00 |
    ---------------------------------
    | + My Second Section           |
    ---------------------------------

when I press on the + sign.

Are there any JavaScript libraries that could help me do such a thing, or is there some magic native command that could do it for my easily?

Anonymous · Accepted Answer · 2009-04-29 06:22:34Z

2

Put each section in a different tbody element, each with an id attribute. Make the first row of each tbody a single header cell (th with the appropriate colspan) with your section header text and an anchor to #the_tbody_id. Then:

Add CSS:

tbody[id]:not(:target) > tr:first-child + tr { display: none !important; }
Or, for non-partial-CSS3 browsers, add Javascript to hide the non-first rows in each of those tbodys (eg, loop through tablelement.getElementsByTagName("tbody")), and hook the anchor to toggle their display property on click (eg, loop through tbodyelement.getElementsByTagName("tr")).

answered Apr 29, 2009 at 6:22

Anonymous

50.6k1 gold badge27 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Bjorn Over a year ago

Setting display on table rows is tricky. What do you set the display property to when you want to display the tr? block? Heh. A TR is not a block level element.

Anonymous Over a year ago

No, you would set it to 'table-row' if you were setting it. But you obviously don't have to. Toggle the .style.display property between the values 'none' and ''.

Petrus Theron Over a year ago

@Anonymous, it would be great if you could post a code sample.

Bjorn · Accepted Answer · 2009-04-29 06:24:08Z

0

Dojo and Jquery both can do this for you, but in case you don't want to use a javascript library this isn't hard with just plain JavaScript. Use an onclick event handler for the +/- toggle, write a function that is executed which sets a block element (one of your sets of rows) to display:none (a css rule). If you're going to use a table to display this, don't try to dynamically hide or show table rows, it doesn't work well.

answered Apr 29, 2009 at 6:24

Bjorn

72.4k40 gold badges140 silver badges165 bronze badges

Comments

SuperIRis · Accepted Answer · 2009-04-29 06:26:52Z

0

You could set the display property of those rows as none, and reset it as "table-row" at click.

But I think that IE doesn't render this appropiately though...

answered Apr 29, 2009 at 6:26

SuperIRis

4135 silver badges9 bronze badges

Comments

rahul · Accepted Answer · 2009-04-29 07:17:38Z

0

You just write a div with display none inside every TR. And on the '+' sign click change the display of the div to block and on '-' click change it again to none.

Assign each div a unique id.

Eg:

<tr>
    <td>
       My Section>
       <div style='display:none'>
          Content goes here
       </div>
   </td>        
</tr>

edited Apr 29, 2009 at 7:17

answered Apr 29, 2009 at 6:23

rahul

188k50 gold badges239 silver badges266 bronze badges

1 Comment

joce Over a year ago

Quick test shows that solution almost working. There's no need for a <div> section, though. When the "style" argument is applied to the <tr> tag, I can actually show / hide entire rows. The test was done statically, though. I still have to hook it to some javascript action.

SendETHToThisAddress · Accepted Answer · 2024-02-16 17:12:57Z

I found the other answers helpful but I didn't see a good explanation with an example so here is how I did it with a simple HTML file...

For the rows you want to show/hide, wrap them in a tbody element and give it a unique id:

<tbody id="collapsible-rows" style="display: none;">
    <tr>
        <td>Col1 data 3</td>
        <td>Col2 data 3</td>
        <td>Col3 data 3</td>
    </tr>
    <tr>
        <td>Col1 data 4</td>
        <td>Col2 data 4</td>
        <td>Col3 data 4</td>
    </tr>
</tbody>

Here I have set display: none so the rows will be hidden initially/by default. On the header for the collapsible section add an onclick method:

<tr onclick="CollapseRows()">
    <th colspan="3" id="click-to-expand">Not So Important Information (click to expand)</th>
</tr>

I have used "(click to expand)" and "(click to collapse)" as the changing text but you could just as easily use "+" and "-".

Below is the method, which does two things. 1) Gets a reference to the tbody element and collapses or expands the rows by setting display to none or to table-row-group. 2) Gets a reference to the section header and changes the displayed text when it's clicked.

function CollapseRows(){
    let collapsibleRows = document.getElementById("collapsible-rows");
    let clickToExpand = document.getElementById("click-to-expand");

    if (collapsibleRows.style.display === "none") {
        collapsibleRows.style.display = "table-row-group";
        clickToExpand.innerHTML = "Not So Important Information (click to collapse)";
    } else {
        collapsibleRows.style.display = "none";
        clickToExpand.innerHTML = "Not So Important Information (click to expand)";
    }
}

Here is the full example:

<html>
<head>
    <style>
        table {
            width: 400px;
        }

        table, td {
            border: 1px solid #333; /*border size & color*/
            border-collapse: collapse; /*No margin around the cells*/
        }

        th /*table header*/
        {
            background-color: #e8f6fc; /*Header row color*/
            color: #000000; /*header row text color*/
            border: 1px solid #333;
        }
    </style>
    <script>
        function CollapseRows(){
            let collapsibleRows = document.getElementById("collapsible-rows");
            let clickToExpand = document.getElementById("click-to-expand");

            if (collapsibleRows.style.display === "none") {
                collapsibleRows.style.display = "table-row-group";
                clickToExpand.innerHTML = "Not So Important Information (click to collapse)";
            } else {
                collapsibleRows.style.display = "none";
                clickToExpand.innerHTML = "Not So Important Information (click to expand)";
            }
        }
    </script>
</head>
<table>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <th colspan="3">Important Information</th>
    </tr>
    <tr>
        <td>Col1 data 1</td>
        <td>Col2 data 1</td>
        <td>Col3 data 1</td>
    </tr>
    <tr>
        <td>Col1 data 2</td>
        <td>Col2 data 2</td>
        <td>Col3 data 2</td>
    </tr>
    <tr onclick="CollapseRows()">
        <th colspan="3" id="click-to-expand">Not So Important Information (click to expand)</th>
    </tr>
    <tbody id="collapsible-rows" style="display: none;">
        <tr>
            <td>Col1 data 3</td>
            <td>Col2 data 3</td>
            <td>Col3 data 3</td>
        </tr>
        <tr>
            <td>Col1 data 4</td>
            <td>Col2 data 4</td>
            <td>Col3 data 4</td>
        </tr>
    </tbody>
</table>
</html>

Collectives™ on Stack Overflow

How to implement collapsible table rows in Javascript?

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related