CODEWITHSUNDEEP
javascriptjquery
rortan
rortan

Reputation: 58

Check if button has been clicked more than once

I have a set of 3 tabs and everytime i click on the same tab it replays the fade-in animation and blinks and i need it to only show the animation when i click on a new tab and not display the fade-in animation when i click on the same tab.

Its because it removes and re-adds the same class everytime i click at it.

what i currently have is:

(function ($) {
    var tabs = $(".tabs li a");
    
    tabs.on("click", function () {
      var content = this.hash.replace("/", "");
      tabs.removeClass("active");
      $(this).addClass("active");
      $("#content").find("section").hide();
      $(content).fadeIn(200);
    });
  })

<ul class="tabs">
          <li><a class="active" href="#/one">Tab 1</a></li>
          <li><a href="#/two">Tab 2</a></li>
          <li><a href="#/three">Tab 3</a></li>
        </ul>

What i have tried:

// if tab is clicked/selected then remove animation
if(!$(tabs).data("clicked")) {
        $(content).fadeIn(200);
      } else {
          $(content).fadeIn(0);
      }
      $(".active").data('clicked', true);

// if click count is higher than 1 then remove animation
var trigger = $(this),
        clickCount = trigger.data('clickCount');

        clickCount++;

        trigger.data('clickCount', clickCount);

        if(clickCount > 1) {
            $(content).fadeIn(0);
        }

Upvotes: 0

Views: 608

Answers (3)

xcx
xcx

Reputation: 59

in JavaScript

element is the button you need specifically. you can get the button id using a simple Js query

var element = document.getElementById('buttonID');

element.on('click', (){
  let counter = 0;
    return function inner() {
        counter++;
        console.log('Number of clicks: ' + counter);
    };
})

Upvotes: 0

Vladyslav Hnatovskyi
Vladyslav Hnatovskyi

Reputation: 36

I'd suggest always check if active class exists before adding it. And only if it doesn't exist add this class and animation. In this case if active class exists you will not be able to add this class again and the animation not be triggered again.

Upvotes: 0

Funky
Funky

Reputation: 155

Have you tried like that :

var tabs = $(".tabs li a");

tabs.on("click", function () {

  if( !$(this).hasClass("active") ){
    var content = this.hash.replace("/", "");
    $("#content").find("section").hide();
    $(content).fadeIn(200);
    $(".tabs li").find(".active").removeClass("active");
    $(this).addClass("active");
  }


});

Upvotes: 1

Related Questions