Aleš Sýkora wrote

Toggle Table Row with jQuery (usable in Toolset)

31. 12. 2019 in

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Conditional check if page is parent or child in WordPress
14. 1. 2021 in
If you need to display something only if post has childs (or not), you can use this conditional in your code.
Read More
Aleš Sýkora wrote
Disable WordPress admin bar for all except admins
17. 6. 2021 in
If you have your custom administration for users made with Toolset, you will propably need to hide the admin bar for your users except administrators. So if you have this question: “When you are logged in, the black wordpress top bar is showing up – is it possible to hide this bar for all users […]
Read More
Aleš Sýkora wrote
Calculate between Toolset Types fields easily
10. 10. 2018 in
Calculate between your Toolset custom post fields. Make your own plugin with shortcode today (or download our for free). Start now with our tutorial!
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram