使用jQuery在WordPress Toolset表格中切换显示额外行详情

Alright, I've got this sorted out! Here's the fully working implementation for toggling expandable rows in a Toolset-generated table that pushes other content down when expanded:

Working Toolset Loop Code #

This is the code you'll place in your Toolset Views layout (I fixed a syntax issue where the excerpt was incorrectly placed as a row attribute):

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<table width="100%">
<thead>
<tr>
<th>[wpv-heading name="types-field-release-date"]Year[/wpv-heading]</th>
<th>[wpv-heading name="post-link"]Title[/wpv-heading]</th>
<th>[wpv-heading name="types-field-publisher"]Publisher[/wpv-heading]</th>
<th>[wpv-heading name="post-excerpt"]Synopsis[/wpv-heading]</th>
</tr>
</thead>
<tbody class="wpv-loop js-wpv-loop">
<wpv-loop>
<tr>
<td>[types field='release-date' style='text' format='Y'][/types]</td>
<td>[wpv-post-link]</td>
<td>[types field="publisher"][/types]</td>
<td><a href="#" class="toggler" data-prod-cat='[wpv-post-id]'><i class="fa fa-caret-square-o-down" aria-hidden="true"></i></a></td>
</tr>
<tr class="cat[wpv-post-id]" style="display:none">
    <td colspan="4">[wpv-post-excerpt format="noautop"]</td>
</tr>
</wpv-loop>
</tbody>
</table>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]

jQuery Toggle Script #

Add this script to your theme's custom JS area or via a code snippet plugin:

jQuery(document).ready(function(){
    jQuery(".toggler").click(function(e){
        e.preventDefault();
        // Toggle the matching hidden row
        jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
        // Optional: Swap the caret icon to show expanded/collapsed state
        jQuery(this).find('i').toggleClass('fa-caret-square-o-down fa-caret-square-o-up');
    });
});

Key Implementation Details #

• Each toggle button uses a data-prod-cat attribute populated with the post ID ([wpv-post-id]), creating a unique link to its matching hidden row
• The expandable row has a unique class cat[wpv-post-id] so we can target it precisely without affecting other rows
• Using jQuery's toggle() method switches the row's display property between none and table-row, which maintains proper table formatting and pushes subsequent rows down automatically
• The post excerpt is wrapped in a full-width cell (colspan="4") to span the entire table width for clean, readable layout
• The optional icon toggle gives users clear visual feedback about the row's current state

内容的提问来源于stack exchange，提问作者Jonathan Ang