---
description: >-
  https://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions/18287434
---

# jQuery click / toggle between two functions (ok)

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>Document</title>
    <style type="text/css" media="screen">
      #time {
        background: #ddd;
        width: 30px;
        height: 80px;
        white-space: nowrap;
        overflow: hidden;
        cursor: pointer;
      }
      #time p {
        margin-left: 35px;
      }
    </style>
  </head>
  <body>
    <div id="time">
      <p>You can see this if you click</p>
    </div>
    <script type="text/javascript">
      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);
            }
          });
    </script>
  </body>
</html>
```

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1E4Gk2ppVKb4olmnun%2Fuploads%2FqhrgNYcmPRp0iR7rxdWu%2FScreenshot_1.png?alt=media\&token=da8037e0-141d-48b5-9ef4-3137ffb21273)
