So basically you will see what kind of animation I wanted to achieve here, except… When one of the navbar elements is clicked I would like it to stay as in hovered state, and to go back to initial state when one of the other elements is clicked. I’ll leave public share link here so you can see what’s going on and if there is any way to solve this mystery. Thanks in advance!
First, the interaction is using the same for each block. To do this, you’ll need to create another interactions for the same block that is a “Click” interaction that keeps the block open on first click and closes on another click.
Honestly, I would add another parent Div to the entire link block because you’ll need the hover on the outer parent div to open the main link.
Then inside that, you’ll have another Div block that holds all the link content. A click interaction is for that inner parent Div to keep it open.
This inner parent will have the combo class, because you’ll need to open 1, then tell 2 & 3 to stay closed. When opening 2, 1 & 3 will need to close, and so on.
- The hover will be on the outer parent, which can be reused. The click will be on the inner parent to make the icon color change and keep the text block (About-div) open, until clicking another link. These 3 links will each need a separate interaction in the panel list.
Hope that makes sense