Jquery Toggle between two functions
HTML
<h1 class="text-center">Toggle between two functions</h1>
<hr>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h2 class="text-center">Input</h2>
<button id="toggler" class="btn btn-success">Toggler</button>
<button id="clear" class="btn btn-warning">Clear output</button>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<h2 class="text-center">Output</h2>
<pre id="output">
</pre>
</div>
</div>
</div>
CSS
/*
This is a very basic construction on how to toggle between two functions using jQuery plugin.
Function clickToggle gets two arguments: function1 and function2.
Initialy, when you first time click on a button "Toggler", second function from asset executed.
On a second click - first function from an asset.
*/
JAVASCRIPT
jQuery.fn.clickToggle = function(a,b) {
function cb(){ [b,a][this._tog^=1].call(this); }
return this.on("click", cb);
};
$(document).ready(function(){
$("#clear").click(function(){$("#output").html("")});
$("#toggler").clickToggle(
function(){
$("#output").append("<p>Odd</p>");
}, function(){
$("#output").append("<p>Even</p>");
});
});
