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

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

• javascript
• php
• html
• mysql

Share Improve this question Follow asked Apr 8, 2015 at 12:18 NCollinsTENCollinsTE 30911 gold badge33 silver badges1313 bronze badges 1

• I'm not sure, you want to display the table content by clicking the table header ? – Jordan Commented Apr 8, 2015 at 12:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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);
});

I have created a sample code

$(function () {

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

});

<script src="https://ajax.googleapis./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.