How to create a nice looking FAQ

Hello,

I have been searching but I didn’t find an entire video that explains how to create a FAQ like this :

https://burro.herokuapp.com/faq.html

I already watched Show and hide on click | Webflow University and https://interactions.webflow.com/click-to-show-content-video but I am still struggling

Also, what is the link setting for a button in a FAQ ? I removed the page link from the button and now I can’t click on my button anymore.

Thanks for your help :slight_smile:

Hi @etienneflorent

Honestly, everything you want to do with Webflow, is somewhere here :slight_smile:

@Waldo has a nice set of accordion menus that you can study and style to your needs :slight_smile:

Just do some reverse engineering and you should be able to build something to fit your needs.
Let us know if you need more detailed help, or if you’re able to handle this from this stage :smiley:

3 Likes

Use the the dropdown widget. The trick is to set the dropdown list to position auto.

Here’s a quick demo
http://faq-201319.webflow.io/

And heres how I did it
https://preview.webflow.com/preview/faq-201319?preview=c42867effcc5c3f6c839e0ea9442f9f8

2 Likes

Thanks. I am having a look at it right now.

So far, I could make something like this :
https://preview.webflow.com/preview/faqtry?preview=ce8a66c38c6216e0881a842ef01a97d5

@etienneflorent and @IggsTP thanks for the mention, I made a tutorial within the blog post on creating these accordion menus which work great for FAQ’s.

I haven’t made a video tutorial on something like this but I could. I can also make one on creating expandable/collapsable pieces like that which aren’t in an accordion, would that be helpful?

2 Likes

Yes, that would be very helpful.

Hey, thanks again for your link.

When adding the questions, the arrows are overlapping the text on mobile screen (phone portrait) when reducing it to the smallest size possible . What would you do in that case ?

Yes, I’ve seen that before. Can’t remember now what I did. I’ll test later or tomorrow and let you know.

1 Like

Cool, will wait. Also, when adding the answers to my questions, the texts (Dropdown link) are so long that they taks more than the entire width of the screen. I tried to set the width of Dropdown link and Dropdown List but the texts still go out of the boxes. How can I change that ?

Thanks for nice help :slight_smile:

I added a DIV inside the Dropdown and now it seems fine.

Hi, this is my work in progress on a FAQ page - http://www.roseweb.studio/faq still loads of questions to add but the design seems to work well

1 Like

Looks pretty good. I like the colour.

The webflow class w-dropdown-toggle has css white-space: nowrap; wich means the text will not wrap.
You have to add custom css white-space: normal; to the toggle element where the text is. Not that easy to work with inside designer but what gonna do =)
I updated my demo.

3 Likes

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.