Hello
I’m trying to use interactions to obtain the behaviors below. A good example of what I’m trying to achieve is shown on the 4 Rivers Catering | BBQ Catering at its best website (expanding accordion section).
Required behaviour
- On hover in: Show background (with transition)
- On hover out: ease out background
- On 1st click: show / expand hidden content section (accordion style)
- On 1st click: make background of section static, so that it is not affected by hover out interaction
- On 2nd click: collapse / hide content section
- On 2nd click: reset interaction (ease out background)
I’m able to get all of these interactions to work, but independent of each other. I would like for them to work together. I’ll explain.
If I set up the hover in and hover out behaviours on my desired section and set the 1st click interaction as show hidden content - it works fine.
However, if I choose the 1st click interaction to also fix the background, that doesn’t work. The hover out behaviour still takes precedence.
The idea is to have conditional interactions. Please tell me whether this is possible at all?
Here’s my website https://webflow.com/design/fxp?preview=0307ca18896dfdbefec4fd30a33d613d
(I have changed a few things - but you may look at the ‘Show catering content 2’ interaction.
Many thanks