Hide Content on Load

Hi,
In a product page like this I have added an Additional Tab for “Shipping & Delivery”. I have also added content for this tab.

The problem is, I dont want the content of the tab to be visible on page load, it should only be visible if a user wants to see it, so only if a user clicks the arrow near the tab title the content should come, not on page load.

Please let me know how to do this.

Hello,
By default, WooCommerce opens first tab when the page is loaded. You can try to close it manually right after page loading by adding this code snippet to the Custom JS section in Theme Settings

setTimeout(function() {
    var $tabs = jQuery( '.wc-tabs, ul.tabs' ).first();
    $tabs.parent().find('#tab-basel_additional_tab').hide();
    $tabs.parent().find( '. basel_additional_tab_tab' ).removeClass('active');
}, 10);

Regards

Your solution is indeed close to what I want. One problem with your solution is I have to click expand arrow two times for content to appear, as you can see in this link

Please, try to replace with this one

setTimeout(function() {
    var $tabs = jQuery( '.wc-tabs, ul.tabs' ).first();
    $tabs.parent().find('#tab-basel_additional_tab').hide();
    $tabs.parent().find( '.basel_additional_tab_tab' ).removeClass('active');
}, 10);

[Author]

Posts