AkhilRaja Posted December 9, 2021 Share Posted December 9, 2021 i created this click function animation, the problem im having is when the page load all the link should have red color, on clicking on any one of the link rest of the link get blue color and the click link should have red color. like when i click on "slide3" then it become red and rest become blue but when i click on "slide1" all of them become red, i only want click link should get red, and on the second click on "slide1" all of them become red like a toggle action See the Pen gOGMBjB by AkhilRaja (@AkhilRaja) on CodePen Link to comment Share on other sites More sharing options...
Cassie Posted December 9, 2021 Share Posted December 9, 2021 Hey there @AkhilRaja, It's a little out of the scope of these forums to help with custom logic and I'm not certain what it is you're after from the description. But it sounds like you need to run different logic depending on whether you're clicking on the same card you've just clicked on. Or whether you're clicking on a new card? let previous; links.forEach((link, index) => { link.addEventListener("click", (e) => { console.log(e.target.id) let current = e.target.id if(current === previous) { console.log('same') } else { console.log('new') } previous = current }); }); 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted December 9, 2021 Author Share Posted December 9, 2021 7 minutes ago, Cassie said: Hey there @AkhilRaja, It's a little out of the scope of these forums to help with custom logic and I'm not certain what it is you're after from the description. But it sounds like you need to run different logic depending on whether you're clicking on the same card you've just clicked on. Or whether you're clicking on a new card? let previous; links.forEach((link, index) => { link.addEventListener("click", (e) => { console.log(e.target.id) let current = e.target.id if(current === previous) { console.log('same') } else { console.log('new') } previous = current }); }); Hey @Cassie what i want to do is create reverse animation like a toggle animation on each click, my aim are - click on a link will get me a red color on the "selected link" text and rest of them become blue - click on the same link again will get me red color on all the links, which is running fine as a reverse animation - now if we click on the link like click on "link 2" and then click on "link 4" then "link 4" should get red color and rest of them become blue and click on "link 4" for second time then all of the link should get red color Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 9, 2021 Solution Share Posted December 9, 2021 Hey again Akhil, I've expanded on the snippet I linked to above - something like this might work. See the Pen wvrWNKx?editors=1011 by GreenSock (@GreenSock) on CodePen As I said before though, this is a custom logic issue, not a GSAP question and I'm afraid this falls outside of the help we offer here. 1 1 Link to comment Share on other sites More sharing options...
AkhilRaja Posted December 12, 2021 Author Share Posted December 12, 2021 On 12/9/2021 at 10:43 PM, Cassie said: Hey again Akhil, I've expanded on the snippet I linked to above - something like this might work. As I said before though, this is a custom logic issue, not a GSAP question and I'm afraid this falls outside of the help we offer here. thank you so much @Cassie for helping me on this, i never heard of e.target.id its really new for me and its so helpful feature. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 12, 2021 Share Posted December 12, 2021 10 hours ago, AkhilRaja said: thank you so much @Cassie for helping me on this, i never heard of e.target.id its really new for me and its so helpful feature. Actually, it might be better to use e.currentTarget.id, as target might not be the correct element if you have several elements nested inside of it. Quote The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget 3 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