how to make active and inactive onclick for 5 buttons

Question

I have five buttons. If button A is clicked it should be active and the rest should be disabled.

Right now when click multiple times on any one of the disabled alphabet-buttons it gets activated along with whichever is active.

Each of the 5 buttons has its own function. When click on a button, the corresponding animation will start continuously. If click on same A button how can I stop the animation? How can I disable the other four buttons?

 var click = 0; //track the click $('.particletext').click(function () { if (click == 0) { //for first click change the onclick function to stopAnimation() for the element which is clicked and remove onclick functions of others $('.particletext').attr("onclick", ""); $(this).attr("onclick", "stopAnimation(this)"); click++; } else { //for second click decrease the click to 0 click--; } }) function stopAnimation(element) { $(element).children('span').remove(); //remove animating particles //for second click re-add onclick functions to all elements $('.hearts').each(function() { $(this).attr("onclick", "hearts()"); $(this).attr("onclick"); }) $('.bubbles').each(function() { $(this).attr("onclick", "bubbles()"); $(this).attr("onclick"); }) $('.sunbeams').each(function() { $(this).attr("onclick", "sunbeams()"); }) $('.confetti').each(function() { $(this).attr("onclick", "confetti()"); }) $('.fire').each(function() { $(this).attr("onclick", "fire()"); }) } function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = 4; for(var i = 0; i <= bubblecount; i++) { var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10); $(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = 3; for(var i = 0; i <= heartcount; i++) { var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10); $(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = 4; for(var i = 0; i <= confetticount; i++) { $(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function fire() { $.each($(".particletext.fire"), function(){ var firecount = 2; for(var i = 0; i <= firecount; i++) { var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8; $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function sunbeams() { $.each($(".particletext.sunbeams"), function(){ var linecount = 3; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>'); } }); }

 .particletext { text-align: center; font-size: 48px; position: relative; } .particletext.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 149, 243, 0.603); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } .particletext.hearts > .particle { opacity: 0; position: absolute; background-color: rgba(204,42,93,1); -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } .particletext.hearts > .particle:before,.particletext.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(204,42,93,1); } .particletext.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .particletext.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .particletext.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } .particletext.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } .particletext.fire > .particle { position: absolute; background-color: rgba(7, 141, 255, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .particletext.fire > .particle:before { position: absolute; content: ''; top: 60%; left: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 40px; border-top-right-radius: 0px; background-color: rgba(0, 66, 251, 0.5); } .particletext.sunbeams > .particle { position: absolute; background-color:#dc3dd5; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } @keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } ul.socialIcons { padding: 0; text-align: center; } .socialIcons li { background: #fff; list-style: none; display: inline-block; margin: 0 25px; font-size: 12px; } .socialIcons li a { text-decoration: none; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="socialIcons"> <li class="particletext hearts" onclick="hearts()"><a>A</a></li> <li class="particletext bubbles" onclick="bubbles()"><a>B</a></li> <li class="particletext sunbeams" onclick="sunbeams()"><a>C</a></li> <li class="particletext confetti" onclick="confetti()"><a>D</a></li> <li class="particletext fire" onclick="fire()"><a>E</a></li> </ul>

Answer 1

It is easier to do this with IDs than just using classes, because when you query classes you get all the classes, so it is then necessary to filter out only the ones you want. So, I added IDs to make the job easier to understand and faster to write.

You need to keep track of both (a) whether an animation is currently active, and (b) which animation is currently active.

You only need to use one method for event handling: either inline (eg onclick="fn_name" - not recommended) or external (the way it is done in this example) . You were using both methods, in which it is easy for the logic to become confuzzled.

There is a neat trick to creating a function call out of a name stored in a variable:

window[var_name]();

 var active=false, active_anim=''; $('.particletext').click(function () { if (!active) { active = true; active_anim = this.id; window[active_anim](); }else{ if (this.id == active_anim){ stopAnimation(active_anim); active = false; }else{ stopAnimation(active_anim); active_anim = this.id; window[active_anim](); } } }); function stopAnimation(element) { $('#'+element).children('span').remove(); //remove animating particles } function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = 4; for(var i = 0; i <= bubblecount; i++) { var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10); $(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = 3; for(var i = 0; i <= heartcount; i++) { var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10); $(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = 4; for(var i = 0; i <= confetticount; i++) { $(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function fire() { $.each($(".particletext.fire"), function(){ var firecount = 2; for(var i = 0; i <= firecount; i++) { var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8; $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function sunbeams() { $.each($(".particletext.sunbeams"), function(){ var linecount = 3; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>'); } }); }

 .particletext { text-align: center; font-size: 48px; position: relative; } .particletext.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 149, 243, 0.603); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } .particletext.hearts > .particle { opacity: 0; position: absolute; background-color: rgba(204,42,93,1); -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } .particletext.hearts > .particle:before,.particletext.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(204,42,93,1); } .particletext.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .particletext.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .particletext.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } .particletext.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } .particletext.fire > .particle { position: absolute; background-color: rgba(7, 141, 255, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .particletext.fire > .particle:before { position: absolute; content: ''; top: 60%; left: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 40px; border-top-right-radius: 0px; background-color: rgba(0, 66, 251, 0.5); } .particletext.sunbeams > .particle { position: absolute; background-color:#dc3dd5; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } @keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } ul.socialIcons { padding: 0; text-align: center; } .socialIcons li { background: #fff; list-style: none; display: inline-block; margin: 0 25px; font-size: 12px; } .socialIcons li a { text-decoration: none; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="socialIcons"> <li id="hearts" class="particletext hearts"><a>A</a></li> <li id="bubbles" class="particletext bubbles"><a>B</a></li> <li id="sunbeams" class="particletext sunbeams"><a>C</a></li> <li id="confetti" class="particletext confetti"><a>D</a></li> <li id="fire" class="particletext fire"><a>E</a></li> </ul>

---

Update:

I misread your question and created an example where clicking on button A starts the animation, and then clicking on another button stops the first animation and starts the new animation.

That might not be what you want. Re-reading your question, it appears that you want to disable the other buttons if an animation is currently running, only allowing the user to click a second time on the same button in order to stop that animation.

If so, here is a revised example for you:

 var active=false, active_anim=''; $('.particletext').click(function () { if (!active) { active = true; active_anim = this.id; $(this).addClass('activebox'); //<=== also added window[active_anim](); }else{ if (this.id == active_anim){ $('.particletext').removeClass('activebox'); //<=== also added stopAnimation(active_anim); active = false; }else{ console.log('Button ' +this.id+ ' ignored') } } }); function stopAnimation(element) { $('#'+element).children('span').remove(); //remove animating particles } function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = 4; for(var i = 0; i <= bubblecount; i++) { var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10); $(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = 3; for(var i = 0; i <= heartcount; i++) { var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10); $(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = 4; for(var i = 0; i <= confetticount; i++) { $(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function fire() { $.each($(".particletext.fire"), function(){ var firecount = 2; for(var i = 0; i <= firecount; i++) { var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8; $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function sunbeams() { $.each($(".particletext.sunbeams"), function(){ var linecount = 3; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>'); } }); }

 .particletext{border:1px solid transparent;padding:2px;} .activebox{border:1px solid green;} .particletext { text-align: center; font-size: 48px; position: relative; } .particletext.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 149, 243, 0.603); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } .particletext.hearts > .particle { opacity: 0; position: absolute; background-color: rgba(204,42,93,1); -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } .particletext.hearts > .particle:before,.particletext.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(204,42,93,1); } .particletext.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .particletext.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .particletext.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } .particletext.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } .particletext.fire > .particle { position: absolute; background-color: rgba(7, 141, 255, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .particletext.fire > .particle:before { position: absolute; content: ''; top: 60%; left: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 40px; border-top-right-radius: 0px; background-color: rgba(0, 66, 251, 0.5); } .particletext.sunbeams > .particle { position: absolute; background-color:#dc3dd5; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } @keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } ul.socialIcons { padding: 0; text-align: center; } .socialIcons li { background: #fff; list-style: none; display: inline-block; margin: 0 25px; font-size: 12px; } .socialIcons li a { text-decoration: none; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="socialIcons"> <li id="hearts" class="particletext hearts"><a>A</a></li> <li id="bubbles" class="particletext bubbles"><a>B</a></li> <li id="sunbeams" class="particletext sunbeams"><a>C</a></li> <li id="confetti" class="particletext confetti"><a>D</a></li> <li id="fire" class="particletext fire"><a>E</a></li> </ul>

Answer 2

Here's the solution. Some changes in js file and I've used comments to separate the changes.

 //my code starts here var click = 0; //track the click var elementClassName; $('.particletext').click(function () { if (click == 0) { elementClassName = $(this).attr('class'); //for first click change the onclick function to stopAnimation() for the element which is clicked and remove onclick functions of others $('.particletext').attr("onclick", ""); $(this).attr("onclick", "stopAnimation(this)"); click++; } else { //for second click decrease the click to 0 if ($(this).attr('class') == elementClassName) { click--; } } }) //my code ends here function stopAnimation(element) { $(element).children('span').remove(); //remove animating particles //for second click re-add onclick functions to all elements $('.hearts').each(function() { $(this).attr("onclick", "hearts()"); $(this).attr("onclick"); }) $('.bubbles').each(function() { $(this).attr("onclick", "bubbles()"); $(this).attr("onclick"); }) $('.sunbeams').each(function() { $(this).attr("onclick", "sunbeams()"); }) $('.confetti').each(function() { $(this).attr("onclick", "confetti()"); }) $('.fire').each(function() { $(this).attr("onclick", "fire()"); }) } function bubbles() { $.each($(".particletext.bubbles"), function(){ var bubblecount = 4; for(var i = 0; i <= bubblecount; i++) { var size = ((Math.floor( Math.random() * (80 - 40 + 1) ) + 40)/10); $(this).append('<span class="particle" style="top:' + 27 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function hearts() { $.each($(".particletext.hearts"), function(){ var heartcount = 3; for(var i = 0; i <= heartcount; i++) { var size = ((Math.floor( Math.random() * (120 - 60 + 1) ) + 60)/10); $(this).append('<span class="particle" style="top:' + 11 + '%; left:' + (Math.floor( Math.random() * (95 - 0 + 1) ) + 0) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function confetti() { $.each($(".particletext.confetti"), function(){ var confetticount = 4; for(var i = 0; i <= confetticount; i++) { $(this).append('<span class="particle c' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1) + '" style="top:' + (Math.floor( Math.random() * (50 - 10 + 1) ) + 10) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' + (Math.floor( Math.random() * (8 - 6 + 1) ) + 6)+ 'px; height:' + (Math.floor( Math.random() * (4 - 3+ 1) ) + 3) + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function fire() { $.each($(".particletext.fire"), function(){ var firecount = 2; for(var i = 0; i <= firecount; i++) { var size = Math.floor( Math.random() * (12 - 8 + 1) ) + 8; $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (70 - 40 + 1) ) + 40) + '%; left:' + (Math.floor( Math.random() * (1 +20 + 11) ) + 1) + '%;width:' + size + 'px; height:' + size + 'px;animation-delay: ' + 0.1 + 's;"></span>'); } }); } function sunbeams() { $.each($(".particletext.sunbeams"), function(){ var linecount = 3; for(var i = 0; i <= linecount; i++) { $(this).append('<span class="particle" style="top:' + (Math.floor( Math.random() * (0 + 40 + 1) ) - 40) + '%; left:' + (Math.floor( Math.random() * (100 - 0 + 1) ) + 0) + '%;width:' +(Math.floor( Math.random() * (2 - 1 + 1) ) + 1 )+ 'px; height:' + 35 + '%;animation-delay: -' + 0.1 + 's;"></span>'); } }); }

 .particletext { text-align: center; font-size: 48px; position: relative; } .particletext.bubbles > .particle { opacity: 0; position: absolute; background-color: rgba(33, 149, 243, 0.603); -webkit-animation: bubbles 3s ease-in infinite; animation: bubbles 3s ease-in infinite; border-radius: 100%; } .particletext.hearts > .particle { opacity: 0; position: absolute; background-color: rgba(204,42,93,1); -webkit-animation: hearts 3s ease-in infinite; animation: hearts 3s ease-in infinite; } .particletext.hearts > .particle:before,.particletext.hearts > .particle:after { position: absolute; content: ''; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(204,42,93,1); } .particletext.hearts > .particle:before { -webkit-transform: translateX(-50%); transform: translateX(-50%); } .particletext.hearts > .particle:after { -webkit-transform: translateY(-50%); transform: translateY(-50%); } .particletext.lines > .particle { position: absolute; background-color: rgba(244, 67, 54, 0.5); -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; } .particletext.confetti > .particle { opacity: 0; position: absolute; -webkit-animation: confetti 3s ease-in infinite; animation: confetti 3s ease-in infinite; } .particletext.confetti > .particle.c1 { background-color: rgba(76, 175, 80, 0.5); } .particletext.confetti > .particle.c2 { background-color: rgba(156, 39, 176, 0.5); } .particletext.fire > .particle { position: absolute; background-color: rgba(7, 141, 255, 0.5); border-radius: 40px; border-top-right-radius: 0px; -webkit-animation: fires 0.8s linear infinite; animation: fires 0.8s linear infinite; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } .particletext.fire > .particle:before { position: absolute; content: ''; top: 60%; left: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 50%; height: 50%; border-radius: 40px; border-top-right-radius: 0px; background-color: rgba(0, 66, 251, 0.5); } .particletext.sunbeams > .particle { position: absolute; background-color:#dc3dd5; border-radius: 100px; top: 0px; left: 0px; width: 100%; height: 100%; -webkit-animation: sunbeams 3s linear infinite; animation: sunbeams 3s linear infinite; } @-webkit-keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @keyframes bubbles { 0% { opacity: 0; } 20% { opacity: 1; -webkit-transform: translate(0, -20%); transform: translate(0, -20%); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%); transform: translate(0, -1000%); } } @-webkit-keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @keyframes hearts { 0% { opacity: 0; -webkit-transform: translate(0, 0%) rotate(45deg); transform: translate(0, 0%) rotate(45deg); } 20% { opacity: 0.8; -webkit-transform: translate(0, -20%) rotate(45deg); transform: translate(0, -20%) rotate(45deg); } 100% { opacity: 0; -webkit-transform: translate(0, -1000%) rotate(45deg); transform: translate(0, -1000%) rotate(45deg); } } @-webkit-keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @keyframes lines { 0%, 50%, 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } 25% { -webkit-transform: translateY(100%); transform: translateY(100%); } 75% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @-webkit-keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @keyframes confetti { 0% { opacity: 0; -webkit-transform: translateY(0%) rotate(0deg); transform: translateY(0%) rotate(0deg); } 10% { opacity: 1; } 35% { -webkit-transform: translateY(-800%) rotate(270deg); transform: translateY(-800%) rotate(270deg); } 80% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(2000%) rotate(1440deg); transform: translateY(2000%) rotate(1440deg); } } @-webkit-keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @keyframes fires { 0% { -webkit-transform: rotate(-70deg) translateY(0%); transform: rotate(-70deg) translateY(0%); } 25% { -webkit-transform: rotate(-20deg) translateY(-5%); transform: rotate(-20deg) translateY(-5%); opacity: 1; } 50% { -webkit-transform: rotate(-70deg) translateY(-10%); transform: rotate(-70deg) translateY(-10%); } 75% { -webkit-transform: rotate(-20deg) translateY(-20%); transform: rotate(-20deg) translateY(-20%); } 100% { -webkit-transform: rotate(-70deg) translateY(-40%); transform: rotate(-70deg) translateY(-40%); opacity: 1; } } @-webkit-keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } @keyframes sunbeams { 0% { -webkit-transform: translateY(40%) rotate(0deg); transform: translateY(40%) rotate(0deg); } 50% { -webkit-transform: translateY(-40%) rotate(180deg); transform: translateY(-40%) rotate(180deg); } 100% { -webkit-transform: translateY(40%) rotate(360deg); transform: translateY(40%) rotate(360deg); } 0%,14%,17%,43%,53%,71%,80%,94%,100% { opacity: 0; } 6%,15%,24%,28%,48%,55%,78%,82%,99% { opacity: 1; } } ul.socialIcons { padding: 0; text-align: center; } .socialIcons li { background: #fff; list-style: none; display: inline-block; margin: 0 25px; font-size: 12px; } .socialIcons li a { text-decoration: none; color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="socialIcons"> <li class="particletext hearts" onclick="hearts()"><a>A</a></li> <li class="particletext bubbles" onclick="bubbles()"><a>B</a></li> <li class="particletext sunbeams" onclick="sunbeams()"><a>C</a></li> <li class="particletext confetti" onclick="confetti()"><a>D</a></li> <li class="particletext fire" onclick="fire()"><a>E</a></li> </ul>