Accordion FAQ using Collection list?

Hello all :slight_smile: I am trying to add a FAQ page to my site, I have worked out the accordion part of it, however I realized there is no way to make a collection list work with this.

I want the main field (the Name/Question) to be the top accordion item you click and then the second field (the answer) to be in the part that opens. But since you cannot separate collection lists into pieces I cannot figure out a way to do this.

Any ideas? See FAQ PAGE.

I think the only way is to just manually create an accordion (without dropdown element) see FAQ Page Copy for what I am working on. Seems counter intuitive…but I guess the only option. It’s working but I don’t know how to make it smooth animation open instead of just show/hide.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hello @NewYears1978

I made a small video to show you how to implement this that you need:

Hope this helps.

Wow - thanks great video. I watched it and was pretty awesome. Will look into a bit further.


Is there no way to ADD a transition to the FAQ Copy page the way it is (without adding the dropdown element?)

For learning purposes.

(I’ve got it setup following your tutorial, works perfect! Thanks again!)

One major issue here, it is NOT responsive when I check in a smaller window the dropdown items go outside the box and my flex content no longer resizes. Help! :slight_smile: Can’t seem to fix…I use this same template page for all content and it flexes fine, but with this collection list/dropdown in there it will not

Are you referring to the titles of the dropdowns?

No the entire thing. If you look at my divs with the borders, normally when I add content it will resize properly with the screen. With the new items in there it doesn’t.

Intended behavior:

Unintended behavior:

Not referring to the cut off text part…that’s from overflow…talking about how the outer border/containers are being broken and the main div for content is not responsive.

I made another small video to help you understand why this is happening:

The code that I used for the titles is the following:

.h1-faq-header {
white-space: normal;

I hope this helps

Checking it out now. Thanks for being so kind - I have not made websites with CSS in a long time. Webflow helps me to do that without FULL knowledge so I am trying to learn what I can :slight_smile:

Awesome that it worked but I wish I knew what it meant lol and how I caused it. My other pages didn’t have that issue.

Edit: Got it all fixed thank you! Still don’t quite understand it, but it works :slight_smile: now just gotta fix that nav menu :expressionless: