Product description closed by default?

[UK_Aspire_Vendo]

Hey all, I hope everyone is well. 

We're running a theme called warehouse by Maestroo, and by default when viewed on mobile the product description tab is open. I'd like it to be closed if possible. 

Can anyone assist here with some code please?

Here's a direct link to a product. 

[PageFly-Amelia · Accepted solution]

Hi @UK_Aspire_Vendo 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<script>
window.addEventListener("DOMContentLoaded", () => {
  document.querySelector('.product-tabs__content button.collapsible-toggle').click();
});
</script>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[PageFly-Amelia · Accepted solution]

Hi @UK_Aspire_Vendo 

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Store -> Themes -> Edit Code

Step 2: Choose file theme.liquid

Step 3: Add code above the tag </head>

<script>
window.addEventListener("DOMContentLoaded", () => {
  document.querySelector('.product-tabs__content button.collapsible-toggle').click();
});
</script>

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

[UK_Aspire_Vendo]

Hi Amelia! 

This worked perfectly - thank you so much!

[BSSCommerce-B2B · Accepted solution]

Hi @UK_Aspire_Vendo 

Step 1: Go to Admin -> Online store -> Theme > Edit code

Step 2: Search for the file global.js or base.js and add this code snippet to the end of the file

(() => {
if (window.innerWidth < 900) {
    const interval = setInterval(() => {
    const collapsibleToggle = document.querySelector(".collapsible-toggle");

    if (collapsibleToggle) {
        const clickEvent = new Event('click', {
            bubbles: true,
            cancelable: true
        });

        collapsibleToggle.dispatchEvent(clickEvent);
        clearInterval(interval);
    }
}, 100);

setTimeout(() => {
    clearInterval(interval);
}, 10000);
}
})()

 If it's helpful, please like and mark it as a solution, thank you
Have a nice day