Nested dropdowns

[Ian Robinson]

Hey Greensockers! Found this very helpful pen and wanted to expand upon it by nesting drop-downs within drop-downs. I had tried by duplicating the code and giving the nested divs different class names but that didn't seem to work at all (plus it felt like a very heavy-handed solution).  Thanks in advance!

See the Pen vYMVgwm by ilrobinson (@ilrobinson) on CodePen

[Ian Robinson]

This is my close fix, but it has the main issue of the parent div not expanding with the content when you click on the Link 2 > link 1b. And again I'm wondering if there's a cleaner approach with the code

See the Pen RwOepde by ilrobinson (@ilrobinson) on CodePen

[mvaneijgen]

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. 

 

I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three?

 

You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! 

 

See the Pen BaEqJOM?editors=1101 by mvaneijgen (@mvaneijgen) on CodePen

[Ian Robinson]

Thanks, Mvaneligen!  It's close, but due to the amount of information (there will be dozens of sub-menus within each menu item) and how it's presented I want it to function like my second version where main menus collapse when others are opened, and the same with the sub-menus as otherwise it's just a long list of drop-downs that the user has to go back and keep closing.

[Ian Robinson]

I complain about using pre-fab code as it's generally too much work to reverse-engineer and tweak but that's what I was doing right here. Came up with a straight CSS/jQuery solution in like 30 minutes versus the hours I was working on the previous code. Plus I can expand with GSAP if need be but works great just like this if anyone else is looking for the same thing (and can add in GSAP)

*I'll add to this CodePen if I end up infusing some GSAP though to keep it relevant to the community

See the Pen ExJOvga by ilrobinson (@ilrobinson) on CodePen

[Rodrigo]

Hey Ian,

 

Great to hear that you were able to solve this 🥳

 

Finally thanks for sharing  your solution with the community, I'm sure many users will benefit from your  generosity 💚

 

Happy Tweening!