jQuery click toggle between two functions

Question

I am looking for a way to have two separate operations   functions    blocks of code  run when something is clicked and then a totally different block when the same thing is clicked again  I put this together  I was wondering if there was a more efficient   elegant way  I know about jQuery  toggle   but it kind of sucks   Working here  http   jsfiddle net reggi FcvaD 1   var count   0      time   click function         count          even odd click detect      var isEven   function someNumber            return  someNumber   2     0    true   false                on odd clicks do this     if  isEven count      false              this  animate               width   260px             1500                on even clicks do this     else if  isEven count      true              this  animate               width   30px             1500

User · Answer

DEMO   one   documentation    I am very late to answer but i think it s shortest code and might help   function handler1         alert  First handler        this  text           this  one  click   handler2     function handler2         alert  Second handler        this  text           this  one  click   handler1        div   one  click   handler1     DEMO With Op s Code  function handler1           this  animate           width   260px         1500         this  one  click   handler2      function handler2           this  animate           width   30px         1500         this  one  click   handler1         time   one  click   handler1

User · Answer

one line solution  basic idea      sth   click function          let COND     this  propery     cond1     cond2     cond1       doSomeThing COND        examples on jsfiddle  example 1  changing innerHTML of an element in a toggle-mode       clickTest1   click function            this  html   this  html       click Me     clicked     click Me          example 2  toggling displays between  none  and  inline-block        clickTest2   clickTest2  gt  span   click function            this  children   css  display     this  children   css  display       inline-block     none     inline-block

User · Answer

modifying the first answer you are able to switch between n functions     x000D   x000D   lt  doctype html gt  x000D   lt html lang  en  gt  x000D    lt head gt  x000D     lt meta charset  UTF-8  gt  x000D     lt meta name  Generator  content  EditPlus com    gt  x000D   lt  --  lt script src     js jquery js  gt  lt  script gt  -- gt  x000D   lt script src  https   code jquery com jquery-2 2 4 min js  gt  lt  script gt  x000D     lt title gt my stupid example lt  title gt  x000D   x000D    lt  head gt  x000D    lt body gt  x000D    lt nav gt  x000D    lt div gt b lt sub gt 1 lt  sub gt  lt  div gt  x000D   lt div gt b lt sub gt 2 lt  sub gt  lt  div gt  x000D   lt div gt b lt sub gt 3 lt  sub gt  lt  div gt  x000D   lt  --            -- gt  x000D   lt div gt b lt sub gt n lt  sub gt  lt  div gt  x000D   lt  nav gt  x000D   lt script type  text javascript  gt  x000D   lt  -- x000D    document  ready function     x000D    function      x000D            fn clickToggle   function     x000D            var ta arguments  x000D           this data  toggleclicked   0   x000D            this click function     x000D          id    this  index   console log  id    x000D              var data     this  data    x000D              var tc   data toggleclicked  x000D                proxy ta id   this     x000D              data toggleclicked   id x000D                x000D            return this  x000D             x000D       jQuery    x000D   x000D       x000D      nav div   clickToggle  x000D       function    alert  First handler       x000D          function    alert  Second handler      x000D          function    alert  Third handler     x000D                 how manny parameters you want      x000D     function    alert  the  n handler     x000D      x000D   x000D      x000D    -- gt  x000D   lt  script gt  x000D    lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Micro jQuery Plugin  If you want your own chainable clickToggle jQuery Method you can do it like    x000D   x000D  jQuery fn clickToggle   function a  b    x000D    return this on  click   function ev     b  a  this   io    1  call this  ev     x000D     x000D   x000D     TEST  x000D     button   clickToggle function ev    x000D      this  text  B     x000D     function ev    x000D      this  text  A    x000D      x000D   lt button gt A lt  button gt  x000D   lt button gt A lt  button gt  x000D   lt button gt A lt  button gt  x000D   x000D   lt script src    code jquery com jquery-3 3 1 min js  gt  lt  script gt  x000D   x000D   x000D      Simple Functions Toggler  LIVE DEMO  function a    console log  a      function b    console log  b          selector   click function        return  this tog    this tog    a     b          If you want it even shorter  why would one  right    you can use the Bitwise XOR  Docs operator like   DEMO    return  this tog  1    a     b      That s all  The trick is to set to the this Object a boolean property tog   and toggle it using negation  tog    tog  and put the needed function calls  in a Conditional Operator        In OP s example  even with multiple elements  could look like   function a el     el  animate  width  260   1500     function b el     el  animate  width  30   1500          selector   click function       var el   this    return  el t    el t    a el    b el          ALSO  You can also store-toggle like  DEMO      selector   click function         this  animate  width   this tog    1    260   30            but it was not the OP s exact request for he s looking for a way to have two separate operations   functions     Using Array prototype reverse   Note  this will not store the current Toggle state but just inverse our functions positions in Array  It has it s uses      You simply store your a b functions inside an array  onclick you simply reverse the array order and execute the array 1  function   LIVE DEMO  function a    console log  a      function b    console log  b      var ab    a b       selector   click function      ab reverse   1        Reverse and Execute      gt  gt   a   b   a   b             SOME MASHUP   jQuery DEMO JavaScript DEMO  Create a nice function toggleAB   that will contain your two functions  put them in Array  and at the end of the array you simply execute the function  0    1  respectively depending on the tog property that s passed to the function from the this  reference   function toggleAB      var el   this      this  is the  button  Element Obj reference    return       function     console log  b           function     console log  a          el tog  1           selector   click  toggleAB

User · Answer

If all you re doing is keeping a boolean isEven then you can consider checking if a class isEven is on the element then toggling that class   Using a shared variable like count is kind of bad practice  Ask yourself what is the scope of that variable  think of if you had 10 items that you d want to toggle on your page  would you create 10 variables  or an array or variables to store their state  Probably not   Edit  jQuery has a switchClass method that  when combined with hasClass can be used to animate between the two width you have defined  This is favourable because you can change these sizes later in your stylesheet or add other parameters  like background-color or margin  to transition

User · Answer

Use a couple of functions and a boolean   Here s a pattern  not full code    var state   false       oddONes   function                evenOnes   function                time   click function         if  state           evenOnes           else           oddOnes                state    state          Or    var cases             function evenOnes             these could even be anonymous functions       function oddOnes              function                var idx   0     should always be 0 or 1        time   click function idx  cases idx     idx 1  2           corrected    Note the second is off the top of my head and I mix languages a lot  so the exact syntax isn t guaranteed   Should be close to real Javascript through

User · Answer

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

User · Answer

I don t think you should implement the toggle method since there is a reason why it was removed from jQuery 1 9   Consider using toggleClass instead that is fully supported by jQuery   function a        function b             Let s say for example that your event trigger is onclick  so          First option       test   on  click   function  event           this  toggleClass  toggled         if    this  hasClass  toggled              a          else          b              You can also send the handler functions as parameters   Second option       test   on  click   handler1  a  handler2  b   function  event           this  toggleClass  toggled         if    this  hasClass  toggled              event data handler1          else          event data handler2

User · Answer

I would do something like this for the code you showed  if all you need to do is toggle a value    var oddClick   true      time   click function           this  animate           width  oddClick   260   30       1500       oddClick    oddClick

User · Answer

I used this to create a toggle effect between two functions   var x   false    element  on  click   function     if   x       function   x   true      else       function   x   false

[javascript] jQuery click / toggle between two functions

Examples related to javascript

Examples related to jquery