Sijo

Thank you helping... The above code is working good but the only issue i am facing is that the background image or color is set to 100vh and when i scroll down to make the accordion work... it is working good though but when set the background color to 100vh and when i scroll down the accordion getting outside the div which i set to 100vh. The accordion and every operation of it's closing and opening should happen inside that 100vh. Is it possible?

I am working on a landing page using HTML, CSS & JS. It's almost completed but I'm stuck in one of the part. I have an accordion in which there are 4 sections that need to be handled using the scroll of page. I have got the solution from the GSAP forum but it is created on the black page. Whereas in my case I am creating my accordion above the footer section and I don't know how to handle it. I'm new to GSAP. I have searched entire web to get it work but failed. don't know how to handle the accordion in the middle of the page. Please, help me out. The image is the accordion design which I'm working on. During the initial load of the page, the first accordion should always be open and as I scroll the 1st one gets closed and the second on gets open and so on. Again when I scroll back the same should happen and 1st accordion should always be open when i scroll up. How to achieve this using GSAP?