Data Table with Collapsible Table Rows

In today’s tutorial we’re going to take a look at an experiment I’ve been working on in the past few days. The basic idea is to have a html data table, that has multiple section, ( group or rows ) that can be toggled. (hidden/shown).

First I’ve tired to make it pure css as I always do with my experiments, but I couldn’t find a way to make it work. ( If you know a way, feel free to leave a comment down below! ) So I went with the jQuery way which was a lot easier.

[tutorial_details]

The HTML Structure

The html structure of the table is pretty simple, the only thing that makes it different then a normal table, is that we have multiple table bodies. ( <tbody> ). The reason for this, is that you can’t use <div> or other html elements outside a <td> element in a table.

This is how it goes:

<table>
    <!-- Table Header -->
    <thead>
    </thead>
    <!-- Main Table Body -->
    <tbody>
        <!-- Chcekbox and Label -->
        <tbody class="label">
        </tbody>
        <!-- Toggleable content -->
        <tbody class="hide">
        </tbody>
        <!-- Chcekbox and Label -->
        <tbody class="label">
        </tbody>
        <!-- Toggleable content -->
        <tbody class="hide">
        </tbody>
    </tbody>
</table>

Inside the <tbody> with the class .label we’ll add a <tr> and a <td colspan=”5″> that expends to all the columns, and inside this we’ll add a checbox, and a label. The checkbox will be hidden with CSS soon.

Then, inside the <tbody> with the class .hide, we add the <tr>s and the <td>s we want to hide. In this case, we’ll have two rows, and 5 columns. So after all this, our HTML should look something like this:

<table>
    <thead>
        <tr>
            <th>Regian</th>
            <th>Q1 2010</th>
            <th>Q2 2010</th>
            <th>Q3 2010</th>
            <th>Q4 2010</th>
        </tr>
    </thead>
    <tbody>
        <tbody class="labels">
            <tr>
                <td colspan="5">
                    <label for="accounting">Accounting</label>
                    <input type="checkbox" name="accounting" id="accounting" data-toggle="toggle">
                </td>
            </tr>
        </tbody>
        <tbody class="hide">
            <tr>
                <td>Australia</td>
                <td>$7,685.00</td>
                <td>$3,544.00</td>
                <td>$5,834.00</td>
                <td>$10,583.00</td>
            </tr>
            <tr>
                <td>Central America</td>
                <td>$7,685.00</td>
                <td>$3,544.00</td>
                <td>$5,834.00</td>
                <td>$10,583.00</td>
            </tr>
        </tbody>
        <tbody class="labels">
            <tr>
                <td colspan="5">
                    <label for="management">Management</label>
                    <input type="checkbox" name="management" id="management" data-toggle="toggle">
                </td>
            </tr>
        </tbody>
        <tbody class="hide">
            <tr>
                <td>Australia</td>
                <td>$7,685.00</td>
                <td>$3,544.00</td>
                <td>$5,834.00</td>
                <td>$10,583.00</td>
            </tr>
            <tr>
                <td>Central America</td>
                <td>$7,685.00</td>
                <td>$3,544.00</td>
                <td>$5,834.00</td>
                <td>$10,583.00</td>
            </tr>
        </tbody>        
    </tbody>
</table>

As you can see, the checkboxes, have an html5 data attribute data-toggle=”toggle”, we’ll use this in our jQuery to toggle the content below it.

The Styling

As for CSS, we’ll give it a basic style, and at the end, hide the checkbox. Nothing fancy.

table { 
    width: 750px; 
    border-collapse: collapse; 
    margin:50px auto;
    }
th { 
    background: #3498db; 
    color: white; 
    font-weight: bold; 
    }
td, th { 
    padding: 10px; 
    border: 1px solid #ccc; 
    text-align: left; 
    font-size: 18px;
    }
.labels tr td {
    background-color: #2cc16a;
    font-weight: bold;
    color: #fff;
}
.label tr td label {
    display: block;
}
[data-toggle="toggle"] {
    display: none;
}

The Magic ( jQuery )

Now to make this work, and be able to toggle ( hide/show ) the sepcific rows, we need to have jQuery added to our document, and also have a separate files, ( app.js in this case ) to hold our scrip.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="app.js"></script>

And in our app.js, we’ll have the following:

$(document).ready(function() {
    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
});

This script, runs every time the state of the checkbox changes. And since by default the rows are shown, then if it’s checked it’ll hide them. If you uncheck it, then they show up again and so on and so forth.

And basically that is it. You can have as many sections like this as you want, just make sure you use different ID and name for each checkbox so they don’t conflict with each other.