Shopify themes, liquid, logos, and UX
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
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025