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>"); }); });
Expand for more options Login