Issues with open/close interaction

Hello everyone,
I need help to figure out why my interaction is not working properly.
I would like my div to expand “on click” and to close when clicking on a children’s close button.
This is my div in its closed state:

This is my div in its opened state:

When I click on the close button trigger my div would close only partially.

Here is the structure of my div:

I’ve also followed the instructions from this video by t.ricks but still there are issues.

Here is my public share link: [LINK]

Can someone explain to me what I am doing wrong?
Thanks a lot,

@enriquespacca Hello friend, try putting the Open Interaction on the “.avatar_wrapper” class and remove that interaction from the .about_container class.

You only need to put the interaction on the first click for the open but make sure it’s on the .avatar_wrapper

1 Like

I made you a loom here - Loom | Free Screen & Video Recording Software | Loom

1 Like

Thank you so much for your help @supji !
Now it’s working :slight_smile:
Just to be able to solve this issue in the future, would you be willing to explain to me the logic behind it? Why when the trigger was on the parent element the interaction didn’t work? Is it because of the structure of this specific object or is there a more general explanation?

@enriquespacca I don’t have the ability to look at the read only link anymore so I can’t dissect everything but I think the main issue here was just the content on what you are animating inside and it didn’t make sense to have it on the .about_container.

Sometimes there can be bugs too so when you have two separate triggers such as an open trigger and a close trigger, in this case, make sure you only have the triggers on First Click. You don’t need the second click usually.

Hope this helps!

@supij it helps indeed! thanks again for your support! Best, Enrique

1 Like