Custom accordion: interaction glitch?

Hello Everyone,

I’ve recreated the accordion with faq of this video: Create a custom accordion | Webflow University, but a strange glitch occurs when I change the value on the following elements:

accordion-toggle: height 3rem (originally 80px)
accordion-item: interaction > accordion open > size: height 3rem (originally 80px)
accordion-item: interaction > accordion close > size: height 3rem (originally 80px)

In the share link below I’ve used a copy of the original ans just edited the three items to 3rem; also here the strange glitch. On close the container briefly grosw to very large and then shrinks again.

Hope anyone can tell me why this is occurring.

Here is my public share link:

Namaste @Wendy
Can you please tell me what are you trying to solve? in general?

What are you trying to learn and achieve? Not specifically with this project

Hi Pravin, thank you for your reply.

I’m trying to create a faq-list and the tutorail I shared is a very nice one. But the height of 80px is not something I want to be ‘stuck’ to, so I would like to set my own height.

The reason for this is that I want to create a specific class for faq-items that have a question of two lines in stead of one. This way the spacing for regular questiones (of one line) can be less than the 80px that is used in the tutorial. So I thought if I change the height in the three places where it is set, it should work, but unfortunately it’s not. I do know that the ‘glitch’ arises the moment I set the ‘accordion close’ to 3rem.

I’m new to interactions, so I don’t know where to look. But I would really like to know what I’m doing wrong, so I can learn a little more about how interactione work.

I hope this explaines my question a bit more. Herewith an updated version of what I’m trying to achieve, using a different height than the tutorial.