redibis Posted October 16, 2023 Share Posted October 16, 2023 Hello, I would like to have the content of each box to appear only after the box has expanded, but I can't manage to implement it. Now the content .large shows up immediately after the box is clicked and the class .expanded is assigned. Anyone can help? Many thanks. See the Pen PoXrYKN by ibiso (@ibiso) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted October 16, 2023 Solution Share Posted October 16, 2023 Hi @redibis and welcome to the GSAP forums! This could be one approach: See the Pen xxmoOoR by GreenSock (@GreenSock) on CodePen Just add an extra class to the description instead of using the parent's class to show/hide that content. Hopefully this helps. Happy Tweening 1 Link to comment Share on other sites More sharing options...
redibis Posted October 17, 2023 Author Share Posted October 17, 2023 Wow thank you so much @Rodrigo, this made my day, I'm so grateful. Is it possible to not run.show when you click again on the expanded box? Link to comment Share on other sites More sharing options...
Rodrigo Posted October 17, 2023 Share Posted October 17, 2023 Hi, Sure thing! Just check if the box being clicked has the expanded class in it: https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/contains This seems to do the trick: box.addEventListener("click", () => { if (box.classList.contains("expanded")) return; // REST OF THE CODE }); Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
redibis Posted October 17, 2023 Author Share Posted October 17, 2023 @Rodrigo Amazing thank you so much! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now