How to edit JavaScript code

Store Design
, , , , , , , ,

Topic summary

A user is troubleshooting a JavaScript animation for collapsible content sections on mobile devices. They added custom code to the collapsible-content.liquid file to create a smooth slide-down effect, but two issues persist:

Problems identified:

  • Short answers (1-2 lines) cause the sliding animation to malfunction or “bug out”
  • No slide-up effect occurs when collapsing content—only slide-down works

Key details:

  • The effect is mobile-only (screens ≤750px width)
  • Desktop version works via CSS, but mobile requires JavaScript
  • Testing in browser developer tools shows correct behavior, but actual mobile devices reveal the bugs

A responder provided updated code, but the original poster confirmed it didn’t resolve either issue. The discussion remains unresolved with the user still seeking a working solution for both animation problems.

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

Hey guys, I need help editing JavaScript.

I added a script at the end of the collapsible-content.liquid file to create a smooth slide-down effect for the collapsible content section on mobile. However, I need help tweaking it to work as I want.

Here’s the code:

And Here’s what I need:

  1. For short answers (1-2 lines), the sliding-down effect doesn’t work properly—it bugs out a bit. I’d like it to work the same way it does for longer answers.

  2. I want to add a smooth slide-up effect when collapsing the content. For some reason, this script doesn’t include the slide-up effect, and I’d like it fixed.

This is only for mobile. I’ve already done it for desktop using CSS, but for some reason, it doesn’t work on mobile, so it needs to be done with JavaScript.

Also, when you check it in the mobile view on the website’s developer tools, it works fine. So please check it on an actual mobile device to see how it behaves.

Here’s the link to my store: https://1049xn-ya.myshopify.com/products/editing-masterclass
(Just scroll all the way down to find the collapsible content section).

Thanks a lot; I’d really appreciate your help.
Tim

2

Hi @CreatorTim ,

I am from Mageplaza - Shopify solution expert.

Here is updated version of your code

Please let me know if it functions as expected. :slightly_smiling_face:

1 Like
3

Hi, honestly, nothing’s changed. Did you check how it works on an actual mobile device? I replaced the old code with this, but it’s still the same.

For short answers (1-2 lines), the sliding-down effect doesn’t work properly—it bugs out a bit. I’d like it to work the same way it does for longer answers.

I want to add a smooth slide-up effect when collapsing the content. For some reason, this script doesn’t include the slide-up effect, and I’d like it fixed.

Thanks a lot, I’d appreciate your help.
Tim