Streaming live at 10am (PST)

Interactions 2.0 - Hide/Show question


#1

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.

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


#2

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


#3

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.


#4

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.


#5

That’s an interesting suggestion. I tried using it but I’m not used to this element.

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:

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?


#6

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.


#7

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