Editing JavaScript code

[CreatorTim]

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:

<script>
if (window.innerWidth <= 750) { // Funguje jen na mobilu (šířka ≤ 750px)
document.querySelectorAll('.accordion details').forEach((detail) => {
const content = detail.querySelector('.accordion__content');

// Inicializace pro zavřený stav
if (!detail.open) {
content.style.maxHeight = '0';
content.style.opacity = '0'; // Skrytý obsah
content.style.transform = 'translateY(20px)'; // Posun zdola
content.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out';
}

detail.addEventListener('toggle', () => {
if (detail.open) {
// Otevírání: Nastavíme výšku, průhlednost a pozici
const scrollHeight = content.scrollHeight;
const minHeight = 50; // Minimální výška pro krátké odpovědi

content.style.maxHeight = Math.max(scrollHeight, minHeight) + 'px'; // Pokud je obsah velmi krátký, nastaví se minimální výška
content.style.opacity = '1'; // Zviditelnění
content.style.transform = 'translateY(0)'; // Vrátí na místo
} else {
// Zavírání: Hladké skrytí
content.style.maxHeight = '0';
content.style.opacity = '0'; // Skrytí obsahu
content.style.transform = 'translateY(20px)'; // Posun zpět dolů
}
});
});
}
</script>

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