Toggle Table Row with jQuery (usable in Toolset)

2 min read / WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: 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: https://jsfiddle.net/GqS7W/. And use it with this jQuery script. Do not forget…

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: https://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:

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

0 comments