Code modification

[CreatorTim]

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:

<script>
if (window.innerWidth <= 750) {
  document.querySelectorAll('.accordion details').forEach((detail) => {
    const content = detail.querySelector('.accordion__content');

    // Initialize styles for the closed state
    if (!detail.open) {
      content.style.maxHeight = '0';
      content.style.opacity = '0';
      content.style.transform = 'translateY(20px)';
      content.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out, padding 0.3s ease-out';
      content.style.willChange = 'max-height, opacity, transform, padding';
      content.style.overflow = 'hidden'; // Prevent content from showing during transitions
    }

    // Handle accordion toggle
    const toggleHandler = () => {
      if (detail.open) {
        // Open: Set height, opacity, and position
        const scrollHeight = content.scrollHeight;
        const minHeight = 50; // Minimum height for short answers

        content.style.maxHeight = Math.max(scrollHeight, minHeight) + 'px';
        content.style.opacity = '1';
        content.style.transform = 'translateY(0)';
        content.style.paddingTop = '10px';
        content.style.paddingBottom = '10px';
      } else {
        // Close: Smooth hide with transitions
        content.style.maxHeight = '0';
        content.style.opacity = '0';
        content.style.transform = 'translateY(20px)';
        content.style.paddingTop = '0';
        content.style.paddingBottom = '0';
      }
    };

    // Use `toggle` event if supported, fallback to `click`
    if ('ontoggle' in document.createElement('details')) {
      detail.addEventListener('toggle', toggleHandler);
    } else {
      detail.addEventListener('click', toggleHandler);
    }

    // Ensure proper cleanup when resizing the window
    window.addEventListener('resize', () => {
      if (window.innerWidth > 750) {
        content.style = ''; // Remove inline styles for desktop
      } else if (!detail.open) {
        // Reapply closed styles on resize
        content.style.maxHeight = '0';
        content.style.opacity = '0';
        content.style.transform = 'translateY(20px)';
        content.style.paddingTop = '0';
        content.style.paddingBottom = '0';
      }
    });
  });
}
</script>

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