Always starts open inside table

Hello.

The issue seems to be that the each of the items in the shopping cart are loaded dynamically after the page load. You will have to reach out to your theme author and ask if they provide a callback on after the checkout items have successfully loaded so other functions can be triggered.

Refer them to this thread if you like.

So is there a way to have the collapsible display correctly inside the tables?

The expand element is displaying correctly, it’s just that the expand element is being loaded dynamically, after the initial page load scripts have already fired.

If it’s not something related to the theme, then it will be a very easy google search on what callbacks woocommerce offers…
…yes, first hit.

You do know how to add Javascript/jQuery to your child-theme, correct? Good.
Here is the callback that needs to hooked into:

jQuery( document ).on( 'updated_checkout', function() {
   collapse_init();
} );

• This reply was modified 6 years, 12 months ago by twinpictures.

it is added twice after the product name

We are no longer seeing the expand element in the cart. Has this been moved?
How exactly did you add the script to your child theme?

Sorry I a not an expert or professional programmer in any way – that’s why I came here for support.

We do what we can to support our free plugins, however this issue is more to do how woocommerce is loading the content of the checkout list. If you require a more professional assistance, we do offer a very high level of personal support with our pro plugin collapse-pro-matic.

Your child-theme should have a functions.php file.
Add this to that:

add_action('wp_footer', 'my_footer_javascript');
function my_footer_javascript() {
    ?>
        <script>
          jQuery( document ).on( 'updated_checkout', function() {
             collapse_init();
          } );
        </script>
    <?php
}

Additional Reading:
https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/
https://codex.ww.wp.xz.cn/Plugin_API/Action_Reference/wp_footer

Well this is fun.

ok, change the js to the following:

jQuery( document ).on( 'init_checkout', function() {
             console.log('hey dude, init checkout has ben called!');
             collapse_init();
} );

We have changed the callback to: init_checkout and added a message that will at least let us know if and when the callback is fired.

ok, again, wrong callback…
kind of like playing battleship.
Next up: updated_wc_div

jQuery( document ).on( 'updated_wc_div', function() {
             console.log('hey dude, updated_wc_div has ben called!');
             collapse_init();
} );

ok, one last try:

jQuery( document ).ready(function() {
     console.log('hey dude, page is ready...');
     collapse_init();
} );

so crazy… so yeah, it’s triggering, but nothing is happening… let’s try and put a timer on that:

jQuery( document ).ready(function() {
     console.log('thinking about maybe triggering some things...');
     setTimeout(function() {
        console.log('...yeah, why not.');
        collapse_init();
     }, 1000);
} );

Fret not, we’ll figure it out.