This is my first webflow project ever and I am kind of struggling to achieve what I would like to achieve with this section. This is how it looks like now.
What I would like to achieve is that every time the user enters the page, the first drop down will be open on default and if they click on 2nd the 1st will close etc. Any ideas how I could achieve this with interaction with no code? Currently I have interaction set for each drop down separately and resources I found so far, did not help me I just made it all broke.
I’m not 100% sure the final result will work because I wasn’t able to test the code on the share-only site, but if it’s not working for any reason, I’d be happy to hop on a quick video-chat to walk through it together
Thanks a lot! If I would like to apply the same effect on different section. Will I need to use the same code just change the class name? Should I just copy the same thing to the next row starting with ???. Also is there any way to add ease animation to that? Cause now its very flat.
@Selmira yes, you can copy the section and the code (all rows) and change the class names.
To animate it, add transitions to ‘faq4_answer’. All styles that change when the active class is added can be animated. Like opacity, margins, bg color, transform etc.
Hey! Thanks a lot. It make sense in theory, but my newbie webflow brain cannot quite grasp it :D. I tried to play with it a little bit, but I just made the code broke and it did nothing. When I look at the element triggers, the only thing that makes sense is to use a mouse click, but how can I connect it to the element which is closed? Or to the class?
@Selmira I just realized that you don’t need to use that code! You can set interactions on faq4_accordion. Open it on first click and close on second (actions with its child faq4_answer, without any additional classes). And one line of code so that the first item is opened.
HI @Selmira I had recently provided solution for for almost identical request so check it out as it may be helpful to bring some light into technical aspect and maybe solve your request.
IMO if text you reveal on click is just informative you may consider to reveal it on hover instead (can be done in WF without custom code) as from UX point of view you will save 1 click to show user this content. Just think about that.
I am super sorry to bother with this again. I have decided to keep it simple and try not to get a nice transition as the priority for now is to have a page functional for testing. I removed all transitions, and interactions, but now nothing is working at all. I tried to build the whole thing again, remove the code and add it back in, but it’s just static. Would any of you two, be kind enough to check what might be wrong.