Toggle Table Row with jQuery (usable in Toolset)

Author: Aleš Sýkora, 31. 12. 2019

If you want toggle to open a new row in the table, then you need to use some jQuery with Toolset again.

First - create the table (you can use it in view, content tempate, etc.). All credit for this example goes to jsfiddle: http://jsfiddle.net/GqS7W/.

<table>
    <tr>
        <td>Product</td>
        <td>Price</td>
        <td>Destination</td>
        <td>Updated on</td>
    </tr>
    <tr>
        <td>Oranges</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="1">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr class="cat1" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
    <tr>
        <td>Apples</td>
        <td>100</td>
        <td><a href="#" class="toggler" data-prod-cat="2">+ On Store</a></td>
        <td>22/10</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>120</td>
        <td>City 1</td>
        <td>22/10</td>
    </tr>
    <tr class="cat2" style="display:none">
        <td></td>
        <td>140</td>
        <td>City 2</td>
        <td>22/10</td>
    </tr>
</table>

And use it with this jQuery script. Do not forget to use jQuery instead of $.

jQuery(document).ready(function(){
    jQuery(".toggler").click(function(e){
        e.preventDefault();
        jQuery('.cat'+jQuery(this).attr('data-prod-cat')).toggle();
    });
});

Here is working example:

[wpv-post-body view_template="table-row-toggle"]

And of course you are free to use it with toolset custom post types, variables, custom fields, etc. Also with Toolset table views.