Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Toggle Table Row with jQuery (usable in Toolset)

Last Update: 07. 01. 2020 , Category:

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:

ProductPriceDestinationUpdated on
Oranges100+ On Store22/10
Apples100+ On Store22/10

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

Support Us via our Affiliate link!

Toolset logo WordPress

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!