Hello everyone
What I want to do is simple: hide/show FAQs. I tried using legacy interactions and the results you can see below. It didn’t work really well.
https://puu.sh/yGJru/519a08fc7c.gif
That’s why I want to use Interactions 2.0 but I’m having a hard time. I was expecting some tips on how to approach this because I honestly have no idea what to do.
By the way, is it possible to avoid all boxed from expanding?
Thanks in advance.
Here is my public share link: LINK
Hello,
After looking at your website I see that both boxes are the same element. You’ll need to make each box a separate element. You will then need to make and interaction for each element they’ll way it is not affected by the other one being clicked.
If my wording that does not make sense or you need further assistance let me know and I can make a short instructional video for you.
Always,
Sean
Set your “display none on load” interaction on Div Block 6 (not on the paragraph)
Change the styling on “Div block 6” to have no overflow.
Then go back to your trigger (Div Block 5) and tell it to “affect different element” to Div Block 6 rather than paragraph.
After quickly looking at your project.
Answer: The solution for you is just to tick the “Limit to nested elements” checkbox. In the interactions settings.
Suggestion: For that sort of interaction, maybe it’s better to use Dropdown element and style it ? - since it has JS attached to it, by clicking outside or other dropdown would close previously opened one.
Hopefully this helps.
That’s an interesting suggestion. I tried using it but I’m not used to this element.
https://puu.sh/yH1YV/81ff4fb71a.gif
Do you think is it possible to make the opening/closing animation smoother? Is is possible to change that little arrow icon when the dropdown is open?
By the way, this solution looks a bit weird when you have multiple questions:
https://puu.sh/yH2x2/6e645106c4.gif
This overlay can be confusing. And it is hard to copy the text cause the dropdown is a actually a link. Can this be fixed?
You can check this link
https://preview.webflow.com/preview/kristaps-template?preview=3cce397233aa14aca53ba2adc0b952cc
If you inspect how I made them, hopefully that will help you.
I’ve built these into several of my sites. Here is one using legacy interactions, if you go the FAQ section, this is what I have done:
http://alanwolfson.webflow.io/faq
Here is my webflow link for you to dissect the process if you’d like (you’ll have to navigate to the FAQ page):
https://preview.webflow.com/preview/alanwolfson?preview=7883a5e38a3f9f3e25fc94518f943382