I’m looking to do just a simple Question list that when clicked on will open the Answer below the question, then vanish again when another question is selected or if the same question is selected again. I see the dropdown widget and tried using that, but I’m looking more for clickable text rather than the icon and not sure if the dropdown widget is appropriate for this or if there is just a simple way to do this.
You’ll be able to do that with interactions.
Set this structure up:
section
– div: QA item
– – link block: question
– – – h3
– – div: answer (with overflow:hidden and height:0px)
And repeat that with as many QA you have.
Now you need to create an interaction that you will put on the link block element.
This interaction will target the “div answers” (limit to siblings) and will do this exactly:
first step: onclick, target all the “div answer” and pass them to height: 0px in 0ms (yes even if they already are, this is to close an open answer when you click on a new question). Don’t set anything for second click.
second step: onclick, add a delay of 10ms, then target div:answer and limit to sibling, pass its height to Auto in 250ms, so the first click will unfold the answer. Don’t set up anything for the second click.
Now you need a way to click again on a question to close the answer, without using the second click (because if you do, you’ll face an impossibility to manage states and sometimes you’ll have to click twice on something to open or close it.
So you need a second element to cover the question block link to catch click once it has been clicked for the first time. For that, create a new link block, sibling to the first one, set the line height the same as the h3 title and 100% width. position absolute and make it cover the title exactly. Give it a zindex of 10. Give it display:hidden.
Now edit your first interaction, and after the other step, set onlcik target the new link block and pass it to display:box.
Create a new interaction that targe all the answers and pass it height:0px, give the interaction to the new link block.
Now everything should work as expected. Please try it and come back with a public link if you have issues with some of this workflow.
1 Like
Thanks for the answers, but I’m new to all this and confused by the steps. Could you elaborate on these points
- First I’ve created the section and blocks as indicated
- I’ve selected the link block element and added an inpage link to “answer1” and set the ID for the answer text block (which is a sibling of the QA Item) to “answer1”. Is this what you meant?
- I don’t under stand what you mean in the first step where you say “…and pass them”. What do you mean by pass them.
Sorry if this should seem obvious to me.
Hello,
This is something like you’re looking for I believe, may help you start off at least 
http://interactions.webflow.com/click-to-show-content-video
Cheers
Matt
That is exactly what I was looking for. I forgot that interactions was what this was called. One thing about this video is the interactions was moved over to the object tab and is no longer in the settings tab as indicated in the video. Took some searching to find it. But I now have the QA up and working as it should. Thanks for the help.
No problem, can we see what you have done?
Thanks for the help Vincent. Your answer now makes sense. I didn’t realize that by interactions you actually meant the “interactions” function. Forgot all about that feature. Still just learning my way around web flow and don’t have all the features memorized yet.
Sure, when I’m done with all the QA. I have just one additional question. Do I need to create a new interaction (and classes) for each question? It seems that way since the interaction references a particular answer class.
Here is the site I’m working on. If you go to the Support/FAQ & Tech Tips menu item you can see the QA dropdowns in action.
https://preview.webflow.com/preview/soundsculpture?preview=17ee39cc9a9b0681c66f4439d0effff2
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.