Vertical Accordion with Height Reset on Window Resize

[pietM]

Hi everyone, 

 

I've reviewed examples from the forum on how to achieve a simple vertical accordion. But, I can't get the heights to reset once I adjust the window dimensions.  I know I have to recalculate the heights and reinitiate the animation function, but it keeps breaking. 

 

I appreciate your help. 

M

See the Pen QWdQexQ by evryali (@evryali) on CodePen

[Rodrigo]

Hi,

 

Yeah, responsive vertical accordions are not the simplest thing, but they're not the hardest neither. It's just about wrapping your head around handling the content height changes and how GSAP works.

 

This sample is not very elegant but it's a solid approach to this. I don't know if it's the best approach, but it works:

See the Pen ZbGeJd by rhernando (@rhernando) on CodePen

 

The code is quite commented so all the explanation and thought process is there. Hopefully is enough to get you started.

 

Happy Tweening!!!