Refresh - Auto open accordion + Smooth open

INFRA · ‎05-15-2025

HI there,

I would like the first tab on my product description to automatically open on page visit. And I would also like the transition of opening/closing the accordions to be smooth.

Can anyone point me in the right direction? Thanks so much!

site

Moeed · ‎05-15-2025

Hey @INFRA

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const accordion = document.getElementById("Details-collapsible_tab_iXjwpE-template--18276682072252__main");
    if (accordion && !accordion.hasAttribute("open")) {
      accordion.setAttribute("open", "");
      const summary = accordion.querySelector("summary");
      if (summary) summary.setAttribute("aria-expanded", "true");
    }
  });
</script>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

INFRA · ‎05-15-2025

hi, thank you! The tab is opened on page visit but it's not opening smoothly. Can I add something to the code for this?

Thanks!

DaisyVo · ‎05-15-2025

Hi @INFRA

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file theme.liquid and add this code at the <head> - https://prnt.sc/4ce68MUf3aYx

<script>
 document.addEventListener("DOMContentLoaded", function () {
    const descriptionPanel = document.querySelector("#Details-collapsible_tab_iXjwpE-template--18276682072252__main");
    if (descriptionPanel) {
      descriptionPanel.classList.add("open"); 
    }
  });
</script>

Best,

DaisyVo

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

Refresh - Auto open accordion + Smooth open

Refresh - Auto open accordion + Smooth open

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications