Expand / Collapse HTML Table by Table Header

Question

I have a series of tables I'm going to display based on some PHP code and MySQL queries. But, was wondering if there was a way to take the following table (with JavaScript or something) to expand and collapse the table data by clicking the table header.

The table I have is coded like...

<table>
    <tr>
        <th>Always Visible</th>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
</table>

Looks like... (with my CSS involved)...

Is this at all possible?

-Nick

Answer 1

Something like this?

Demo@ Fiddle

If you want to collapse the table by default, then do it in CSS, like below.

tbody { display: none; }

<table>
    <thead>
    <tr>
        <th>Always Visible</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    <tr>
        <td>Hidden 01</td>
        <td>Hidden 02</td>
        <td>Hidden 03</td>
    </tr>
    </tbody>
</table>

$("thead").find("th").on("click", function() {
    $(this).closest("table").find("tbody").toggle(); //you can set delay within toggle as well, like .toggle(500);
});

Answer 2

I have created a sample code

 $(function () { var tableBody = $("#tableBody"), tableHead = $("#tableHead"); tableHead.on("click", function () { tableBody.slideToggle("slow"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <thead id="tableHead"> <tr> <th>Always Visible</th> </tr> </thead> <tbody id = "tableBody"> <tr> <td>Hidden 01</td> <td>Hidden 02</td> <td>Hidden 03</td> </tr> <tr> <td>Hidden 01</td> <td>Hidden 02</td> <td>Hidden 03</td> </tr> </tbody> </table> 

I hope this is what you are trying to achieve.