Jump to content
Search Community

Greensock Accordion Menu

phillip_vale test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



I am trying to create an accordion menu using Greensock.


Alot of the code I have used comes from this section of the forum.




Two things different that I am trying achieve are:

  1. Making 'one' open on page load.
  2. Add padding inside the content areas. (Seems to still add padding when the sections are closed.)

Any help is much appreciated.





See the Pen jqLEKL by phillip_vale (@phillip_vale) on CodePen

Link to comment
Share on other sites



I've dealt with more accordion stuff than I really wanted for some time and I can assure you that Carl's second advice is the best way to go. Animating padding will get you very quirky behaviours.


This is an accordion code I made for a Joomla templating system some time ago. It has toggle capacity, is fully responsive and works great with jQuery tap (for better touch support https://github.com/jonpacker/jquery.tap).


As you can see the CSS uses a <p> element (or it can be anything else you want) with a padding and the height animation happens on that element's parent.


Feel free to fork  it and use it at your will, the code is highly commented so you shouldn't have any issues following it:


See the Pen 700a72e818449d5ed8dd23b56f50741c by rhernando (@rhernando) on CodePen


Happy tweening!!

  • Like 6
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.
  • Create New...