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
Display Child taxonomy link on taxonomy archive page
12. 3. 2021 in
Need to display a list of currrent taxonomy archive child taxonomies with links? You can use the wp_list_categories or get_categories. First approach -> using pre styled output with wp_list_categories. Second approach -> using custom html output with get_categories.
Read More
Aleš Sýkora wrote
WooCommerce category clustered by child taxonomies in WordPress
6. 2. 2021 in
If you need to display your parent product category sorted by child taxonomies in clusters – for each child taxonomy it owns row – for example: Breakfasts Category Archive – Parent category Vegetarian – child category Product 1 Product 2 Vegan – child category Product 1 Product 2 Meat lovers – child category Product 1 […]
Read More
Aleš Sýkora wrote
Featured posts query with Oxygen Advanced Query Builder
30. 6. 2021 in ,
Past few days, Oxygen 3.8 was released. It contains beautiful new Query builder for repeaters and easy posts. I will continue to add examples of queries continuously. Here is the first query: Featured (sticky) posts query post_type post meta_query key = featured value = 1 (optional disable pagination) no_found_rows = true Need to ignore sticky […]
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram