Jump to content


Accordion, Active element Expands while The Rest Shrink

Moderator Tag

Recommended Posts

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


Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.