Why does my FAQ section only loads in a certain order?

I have built an FAQ section where the answer appears once you click the question, but the questions only work in a set order, so yo cant just select any 1 question from the list. Can anyone tell me why please


Here is my public share link: http://dream-big-travel-far.webflow.io/

Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slight_smile:

How to share a read-only link:

Thanks in advance! :slight_smile:

Nothing to do with the issue posted, but I’d highly recommend looking at the colours you’ve chosen for this section… It makes my brain hurt.

I’d also look at removing the parallax on the top section, seems to create a lot of lag / slow my browser down… or perhaps look at different ways of implementing it. It can really kill user experience.

2 Likes

Hi Alex. Ok no problem. I hope this is correct: https://preview.webflow.com/preview/dream-big-travel-far?preview=6811607ad26c3746748bad4b331980e2

And I wasn’t sure how to upload print screens onto here, but basically all i mean is that you can only select the FAQ questions in the order they are arranged in the page. So to be able to click on the 5th question down and see its answer, you will have had to click on the 1st, then 2nd, then 3rd, then 4th and then finally the 5th question in order to view it. I’m sorry i hope this is enough. Im new to these forums and fairly new to using webflow so if there is anything else you need just let me know.

Thank you :slight_smile:

Haha thanks Joe, no problem, the colours on there are definitely not final it was just to make them stand out, I must admit it does make my brain hurt as well, probably could have changed them sooner.
And with regards to the parallax: sorry I’m not familiar with this, are you referring to how the second section scrolls over the first and yet the top sections background photo stays stationary?

If so, i really like this feature! Do you think it would be an issue for a lot of people? because i understand user experience is very important, but i would ideally like to keep it

Thanks for the feedback :slight_smile:

Hey Williams.
The reason why you need to click them in order is because the FAQ Text box is interfering with the heading.
(You can see this if you try to take opacity off initial)

The solution
Give all your FAQ heading classes the Position of Relative and set the Z-Index to a big number like 1111
Also, there is no need in having 2 show and hide interactions, unless you want another animation.
David

That’s great thanks very much David! :slight_smile: its all working now.

One other thing though, do you know why the questions dont just all group together?

The FAQ Text box is still using space, even when 0% opacity.
If you want them to group together, you have to do these changes to the interactions:
Inside “Display none on load”

Inside “Show and hide”

Display none is making the element disappear from the website. Display block places it back.
You can now play with the FAQ heading padding and / or margin to make it look less crowded.
David

Wow that’s great thank you again David! I really appreciate your help

1 Like

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