Hello everyone,
I am trying to re-create the FAQs animation present in this website (towards the bottom of the page): https://helen-cms-template.webflow.io/
The only difference is that I would like to do it with a CMS. So far, I have managed to get to this result:
Public link: Frequently asked questions
Read-only link: Webflow - Stepintomyweb
I have created the following “mouse click” interaction:
Each CMS item (i.e., each question) is associated with a specific colour. When you click on one of the CMS items, the full-screen fixed div “background_color_body” goes from display:none to display:block, thus changing the background colour of the page from white to the CMS item’s colour. In fact, if you click on the first question, the background colour goes from white to blue, and then if you click on the second question, the background colour goes from blue to green.
However, this does not work the other way around, meaning: if all the questions are closed and you start by opening the second question, the background colour goes from white to green. But if you then click on the first question, instead of going from green to blue, the background stays green.
By inspecting the website on Chrome, I have realised that when opening the questions in chronological order, the “background_color_body” div of the question clicked “goes on top” of the “background_color_body” div of the previous question. Both “background_color_body” are set to display:block but the one of the last question clicked prevails.
So in the example stated above, the “background_color_body” div of the first question does appear
(blue background) but can’t be seen because the “background_color_body” div of the second question (green background) sits on top of it.
I believe that the solution would be to make the previously clicked question go from display:block to display:none when you are clicking on a new question. But I wouldn’t know how.
Could anybody help me out?
Thank you in advance and hope that everything is clear!
Ginevra