Registering jQuery click, first and second click

Question

Is there a way to run two functions similar to this:

$('.myClass').click(
    function() {
        // First click
    },
    function() {
        // Second click
    }
);

I want to use a basic toggle event, but .toggle() has been deprecated.

Answer 1

Try this:

$('.myClass').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
     // odd clicks
  } else {
     // even clicks
  }
  $(this).data("clicks", !clicks);
});

This is based on an already answered question: Alternative to jQuery's .toggle() method that supports eventData?

Answer 2

Or this :

var clicks = 0;

$('.myClass').click(function() {
    if (clicks == 0){
        // first click
    } else{
        // second click
    }
    ++clicks;
});

Answer 3

this I worked for my menu

var SubMenuH = $('.subBoxHederMenu').height();  
var clicks = 0;

        $('.btn-menu').click(function(){
          if(clicks == 0){
            $('.headerMenu').animate({height:SubMenuH});
            clicks++;
            console.log("abierto");
          }else{
            $('.headerMenu').animate({height:"55px"});
            clicks--;
            console.log("cerrado");
          }
          console.log(clicks);
        });

Answer 4

i don't know what you are tryin to do but we can get basic toggle by

$('.myClass').click({
   var $this=$(this);        
   if($this.is(':hidden'))
    {
      $this.show('slow');
    }else{
      $this.hide('slow');
    }
 })

note: this works for endless click event for that element .. not just for two clicks (if that is what you want)

OR you can use css class to hide/show the div and use jquery.toggleClass()

Answer 5

In the method mentioned below We are passing an array of functions to our custom .toggleClick() function. And We are using data-* attribute of HTML5 to store index of the function that will be executed in next iteration of click event handling process. This value, stored in data-index property, is updated in each iteration so that we can track the index of function to be executed in next iteration.

All of these functions will be executed one by one in each iteration of click event. For example in first iteration function at index[0] will be executed, in 2nd iteration function stored at index[1] will be executed and so on.

You can pass only 2 functions to this array in your case. But this method is not limited to only 2 functions. You can pass 3, 4, 5 or more functions in this array and they will be executed without making any changes in code.

Example in the snippet below is handling four functions. You can pass functions according to your own needs.

 $.fn.toggleClick = function(funcArray) { return this.click(function() { var elem = $(this); var index = elem.data('index') || 0; funcArray[index](); elem.data('index', (index + 1) % funcArray.length); }); }; $('.btn').toggleClick([ function() { alert('From Function 1'); }, function() { alert('From Function 2'); }, function() { alert('From Function 3'); }, function() { alert('From Function 4'); } ]);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button type="button" class="btn">Click Me</button> <button type="button" class="btn">Click Me</button>

Answer 6

            var click_s=0;
            $('#show_pass').click(function(){
                if(click_s % 2 == 0){
                    $('#pwd').attr('type','text');
                    $(this).html('Hide');
                }
                else{
                    $('#pwd').attr('type','password');
                    $(this).html('Show');
                }
                click_s++;
            });

Answer 7

When You click the selector it automatically triggers second and waiting for another click event.

$(selector).click(function(e){
    e.preventDefault(); // prevent from Posting or page loading
     //do your stuff for first click;
     $(this).click(function(e){
     e.preventDefault();// prevent from Posting or page loading
      // do your stuff for second click;
     });
});

I hope this was helpful to you..

Answer 8

If you literally only want the first and second click:

$('.myClass').one( 'click', function() {

    // First click

    $('.myClass').one( 'click', function() {

        // Second click

    });
);

Answer 9

I reach here looking for some answers, and thanks to you guys I´ve solved this in great manner I would like to share mi solution.

I only use addClass, removeClass and hasClass JQuery commands.

This is how I´ve done it and it works great:

$('.toggle').click(function() { 
            if($('.categ').hasClass("open")){
                $('.categ').removeClass('open');
            }
            else{           
                $('.categ').addClass('open');                                   
            }
        });

This way a class .open is added to the Html when you first clikc. Second click checks if the class exists. If exists it removes it.