Need help either removing a classname or reversing an animation as part of an accordion menu

[darkus]

So cribbing other peoples work and using an "unofficial" GSAP classname plugin, i've made an accordion menu where the name of the item will highlight when the mouse goes over the area, and should stay highlighted when the accordion is clicked/opened

 

My problem is that when a user clicks another menu item, id like any highlighted accordion title to unhighlight and the other menus should collapse.  THe other menus do properly collapse, but I cant get the name to properly unhighlight.

 

I tried simply mass unhighlighting using JQuery remove class and that kills the animation for any subsequent tries.   I'm not tied to using the add classname method, but thats all I could come up with because I couldnt figure out how to reverse a the animation if I just directly animate the classname change (text color change)

 

Any ideas?

 

See the Pen rNQjvpL by darkuss (@darkuss) on CodePen

[Rodrigo]

Hi,

 

I think you are overcomplicating this quite a bit. I applaud your efforts for creating the custom plugin, check this video in order to round up that if you're interested in following that particular route:

 

This example seems to do what you're after in a very simple way:

See the Pen JjeNMKd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!