smooth transitions to collapsible rows in the Dawn theme

[LuxSamples]

I tried tutorials, chat gpt, coding but nothing work for me.

im trying to do transition animation like this website:(above the footer)
https://aromatica-il.com

but im failing evrery time! not sure what to do.

my website: my website 

password: tiskau

thanks so much for help!!!

[PaulNewton]

The example is using a lot of animations in the Motion theme in it's theme.css file and your not specific about which animation is relevant.

Nor have you provided a reference to your work so far.

Doing all those animations is hundreds of lines of code and is beyond the scope of a single question in a forum post.

Either narrow the scope of the question and improve detail or hire someone as it is an advanced customization.

If you have the budget and need this customization built you can contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

[LuxSamples]

you right!!

im talking about the collapsible content, im mean when i click on each row i would like to get:
overflow: hidden;
max-height: 0;
transition: max-height 0.3s ease-out;

but the css effect not worked even when i tried to add javascript, this kind of animation is very easy but i cant get the right class!

btw when i used js i wrote:

document.addEventListener("DOMContentLoaded", function() {
const triggers = document.querySelectorAll(".collapsible-trigger");
triggers.forEach(trigger => {
trigger.addEventListener("click", function() {
const content = this.nextElementSibling;
this.classList.toggle("is-open");
content.style.display === "block" ? content.style.display = "none" : content.style.display = "block";
});
});
});

---

---

---

(trying to get smooth transition)

[LuxSamples]

nope, locally

[LuxSamples]

why?

[LuxSamples]

why do you want to place order if i dont selling nothing?