Hi I’m working on a site in which I want to make multiple hidden section that you can then acces by clicking on an image. I want the section to disappear when scrolling past it and when scrolling back up. I want these sections to work a bit like tabs, not entirely but something like it, so when you click on image 1 you open section 1 and scrol to it, then when you click on image 2 I want section 1 to close and open section 2 and scroll to it. Also I want to make a button appear when opening one of the sections (this button being a button to close the section) and hide when no section is opened.
Now I have multiple problems achieving this. The first one is the main one.
-
I used the trigger scroll out of view to get the section to close when I scroll past it or back up. This interaction only seems to work 1 time. When its closed and I open it again it doesn’t close again when scrolling out of view.
-
when I use a first click to open and second click to close it doesn’t work because when you open section 1 and than click on section 2 to open and you then want to go back to section 1, it won’t because the secondary click is registered to close section 1. I tried a view approaches for this
If someone could help me I’d be very grateful! Please tell me if I need to clarify something.
PS: The way the site looks right now and the interactions that are in it now are just to test and I stranded so the Interactions aren’t good right now.
Here is the read only link,
And the site adress:
https://www.motionminded.nl/home-test-1
And here are some images to visualise what I mean:
