Jquery Click/Toggle Between Two Functions

jQuery toggle between 2 functions inside a click event

You can use the hasClass() function to check which function you need to call.

$("#main-nav-toggler").click(function() {        $("#main-nav-menu").toggleClass("menu-show");        $("#main-nav-menu").hasClass("menu-show") ? disableScroll() : enableScroll();});
function disableScroll(){  console.log("disable scroll");}function enableScroll(){  console.log("enable scroll");}

#main-nav-menu {  display: none;}
#main-nav-menu.menu-show {  display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="main-nav-toggler">toggler</div><div id="main-nav-menu">menu</div>

jQuery click / toggle between two functions

jQuery has two methods called .toggle(). The other one ^[docs] does exactly what you want for click events.

Note: It seems that at least since jQuery 1.7, this version of .toggle is deprecated, probably for exactly that reason, namely that two versions exist. Using .toggle to change the visibility of elements is just a more common usage. The method was removed in jQuery 1.9.

Below is an example of how one could implement the same functionality as a plugin (but probably exposes the same problems as the built-in version (see the last paragraph in the documentation)).

---

(function($) {
    $.fn.clickToggle = function(func1, func2) {
        var funcs = [func1, func2];
        this.data('toggleclicked', 0);
        this.click(function() {
            var data = $(this).data();
            var tc = data.toggleclicked;
            $.proxy(funcs[tc], this)();
            data.toggleclicked = (tc + 1) % 2;
        });
        return this;
    };
}(jQuery));

DEMO

(Disclaimer: I don't say this is the best implementation! I bet it can be improved in terms of performance)

And then call it with:

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

Update 2:

In the meantime, I created a proper plugin for this. It accepts an arbitrary number of functions and can be used for any event. It can be found on GitHub.

Toggle Between 2 Functions

A micro jQuery plugin:

jQuery.fn.clickToggle = function(a,b) {
  var ab = [b,a];
  return this.on("click", function(){ ab[this._tog^=1].call(this); });
};

// USE LIKE:

$("button").clickToggle(function() {   
     console.log("AAA");
}, function() {
     console.log("BBB");
}); // Chain here other jQuery methods to your selector

Taken from my answer here https://stackoverflow.com/a/21520499/383904

---

There's other ways to toggle a state / value:

LIVE DEMO

var editAdd = [editList, addList],  // store your function names into array
    c = 0;                          // toggle counter

function editList(){                // define function
   alert('EDIT');
}
function addList(){                 // define function
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd[c++%2]();                 // toggle array index and use as function
                                    // % = Modulo operator
});

where instead of the modulo operator % you can use the

Bitwise XOR operator ^ like: [c^=1]

---

Using Array.reverse()
LIVE DEMO

var editAdd = [editList, addList];

function editList(){
   alert('EDIT');
}
function addList(){
   alert('ADD');
}

$('#edit a').click(function(e){  
  e.preventDefault();
  editAdd.reverse()[0]();
});

reverse will invert our array on every click, all we need to do is take the 0 indexed value [0] and run that function name [0]().

Toggle between two functions when button clicked.

Add this to your controller:

$scope.firstFunction = false;

Then change your toggleToolPanel to the following:

$scope.toggleToolPanel = function() {
    $scope.firstFunction = !$scope.firstFunction;
    if($scope.firstFunction) {
        function1(params);
    } else {
        function2(params);
    }
};

jQuery toggle between two functions

Use a boolean variable to toggle

jQuery('#bigvideo-pause').on('click', function() {
    BV.getPlayer()[this.play ? 'pause' : 'play']();
    this.play = !this.play;
});

JavaScript Toggle between 2 Functions

Something like this?

    var nav = false;

    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
      document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
      nav = true;
                    }

    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
      document.body.style.backgroundColor = "white";
      nav = false;
                    }

    function toggleNav() {
      nav ? closeNav() : openNav();
    }

then just use toggleNav() in the onClick()

---

Related Topics