Accordion, Active element Expands while The Rest Shrink

[Mrima 0 Likes (Newbie)]

Hello, I am looking to create the below effect, whereby on clicking one element, it expands while the other elements collapse.

[GSAP Helper 122 Likes (Specialist)]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

[Carl 11,325 Likes (Superhero)]

I happen to have a lesson that uses a similar setup in my GreenSock course bundle. I keep things as minimal as possible with design so that my students can focus on the code and add their own flair.

 

The main point of this setup is just to get one thing to expand/open when you click on it and close other open things. Flex-box handles "pushing things around" automatically which is a nice bonus. The code is fairly well commented.

 

Perhaps this will help you with some of your project.

 

See the Pen YzGpXWO by snorkltv (@snorkltv) on CodePen

 

* note: when an item is open you can close it using the "x" button OR you can click on another closed item.