Accordion FAQ using Collection list?

Design help General
1

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)

2

Hello @NewYears1978

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

http://cloud.ipagroup.co/riCt

Hope this helps.

4

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

Thanks!

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!)
http://legendsofultima.online/faq-copy-2

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

5

Are you referring to the titles of the dropdowns?

6

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:

image
image751Ă—754 217 KB

Unintended behavior:

image
image989Ă—749 258 KB

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.

7

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

http://cloud.ipagroup.co/riGK

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

<style>
.h1-faq-header {
white-space: normal;
}
</style>

I hope this helps

8

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: