Code modification

Store Design
, , , , , , , , , ,

Topic summary

A user is seeking help to add smooth expand/collapse animations to a collapsible section on mobile devices. They’ve added JavaScript code to their collapsible-content.liquid file, but it’s experiencing issues:

Current problems:

  • Animation only works for expanding, not collapsing
  • Performance is laggy and buggy

Technical details:

  • The code was added at the end of the collapsible-content.liquid file
  • Issue is mobile-specific (desktop animation works differently)
  • Testing requires an actual mobile device rather than browser developer tools

Status: The discussion remains open with no solutions provided yet. A demo URL was shared for troubleshooting purposes.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi, do you know how I can add a smooth animation for expanding and collapsing the content in the collapsible section on mobile?

I added this JavaScript at the end of the collapsible-content.liquid file, but it’s a bit buggy and it only works for expanding:

If anyone knows how to fix this code so it works for both expanding and collapsing, and so the animation isn’t laggy or buggy, I would really appreciate it.

You can check out how it works here: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll down a bit, that’s where the collapsible section is.)

Also, you might need to check it on an actual mobile device because when you look at it via F12, you’ll only see the desktop animation.

Thanks,
Tim