Javascript 按表格标题展开/折叠HTML表格

我将根据一些PHP代码和MySQL查询显示一系列表。但是，我想知道是否有一种方法可以通过单击表头来使用下表（使用JavaScript或其他工具）来扩展和折叠表数据

我的表格编码如下

<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>

始终可见
隐藏01
隐藏02
隐藏03
隐藏01
隐藏02
隐藏03

看起来。。。（与我的CSS有关）

这有可能吗

-尼克

像这样的事

演示@

如果您想在默认情况下折叠该表，那么可以在CSS中进行折叠，如下所示

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

tbody{display:none；}
始终可见
隐藏01
隐藏02
隐藏03
隐藏01
隐藏02
隐藏03
$（“thead”）.find（“th”）.on（“单击”，函数（）{
$（this）.closest（“table”）.find（“tbody”）.toggle（）；//您也可以在toggle中设置延迟，如.toggle（500）；
});

像这样的东西

演示@

如果您想在默认情况下折叠该表，那么可以在CSS中进行折叠，如下所示

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

tbody{display:none；}
始终可见
隐藏01
隐藏02
隐藏03
隐藏01
隐藏02
隐藏03
$（“thead”）.find（“th”）.on（“单击”，函数（）{
$（this）.closest（“table”）.find（“tbody”）.toggle（）；//您也可以在toggle中设置延迟，如.toggle（500）；
});

我创建了一个示例代码

$（函数（）{
var tableBody=$（“#tableBody”），
桌面=$（“#桌面”）；
tableHead.on（“单击”，函数（）{
桌面。滑动切换（“慢”）；
});
});

始终可见
隐藏01
隐藏02
隐藏03
隐藏01
隐藏02
隐藏03
我创建了一个示例代码


$（函数（）{
var tableBody=$（“#tableBody”），
桌面=$（“#桌面”）；
tableHead.on（“单击”，函数（）{
桌面。滑动切换（“慢”）；
});
});

始终可见
隐藏01
隐藏02
隐藏03
隐藏01
隐藏02
隐藏03
我不确定，是否要单击表头显示表格内容？我不确定，是否要单击表头显示表格内容？非常好。非常感谢。现在，如何使其默认折叠？（如果可能的话）添加一些
CSS
默认情况下隐藏它。非常感谢。现在，如何使其默认折叠？（如果可能的话）添加一些
CSS
以在默认情况下隐藏它，如