title: toggle on/off an event listener with condition
body: <p>I got a porblem with my code and I'm pretty confused why is that happening! here is what it going on:</p>
  
  <p>I've got several columns (with 'col-1-2' class) which are assigned a function (miniPage) for on(mouseup) event, whichever you click on, its width expands and other columns collapse, and cycle continues by clicking other columns.
  I want to remove event listener from expanded column, instead assign another function (miniPage2) to a button element (with 'call-to-action' class) inside this column.
  I added 2 event listener for both my classes ('col-1-2' and 'call-to-action') with respective functions, then manage listeners inside functions. my code works fine unless I don't add miniPage2 into my code, but somehow it does'nt work when I add miniPage2, and it seems that both functions (miniPage and miniPage2) will take action even when miniPage is not supposed to so. here is my code:</p>
  
  <pre><code>    $(function() {
          var isDragging = false;
          $(".col-1-2").on("mousedown", function() {
              $(window).on("mousemove", function() {
                  isDragging = true;
                  $(window).off("mousemove")
              })
          })
          .on("mouseup", function() {
              var wasDragging = isDragging;
              isDragging = false;
              $(window).off("mousemove");
              if (!wasDragging) {miniPage(this.id);}
          })
      });
  
      $(function() {
          var isDragging = false;
          $(".call-to-action").on("mousedown", function() {
              $(window).on("mousemove", function() {
                  isDragging = true;
                  $(window).off("mousemove")
              })
          })
          .on("mouseup", function() {
              var wasDragging = isDragging;
              isDragging = false;
              $(window).off("mousemove");
              if (!wasDragging) {miniPage2();}
          })
      });
  
  
      function miniPage(activeTab) {
          var arz;
          arz = $(".col-1-2");
          var elmnt = $("#" + activeTab);
          var isDragging = false;
          if (elmnt.prop('style')['width'] != "80%") {
              arz.animate({width: "20%"},{ duration: 2000, queue: false });
              elmnt.animate({width: "80%"},{ duration: 2000, queue: false });
              arz.off("mousedown mousemove mouseup").on("mousedown", function() {
                  $(window).on("mousemove", function() {
                      isDragging = true;
                      $(window).off("mousemove")
                  })
              })
              .on("mouseup", function() {
                  var wasDragging = isDragging;
                  isDragging = false;
                  $(window).off("mousemove");
                  if (!wasDragging) {miniPage(this.id);}
              })
              elmnt.off("mousedown mousemove mouseup");
          } else {
              arz.animate({width: "50%"},{ duration: 2000, queue: false });
              }
          }
      }
  
  
      function miniPage2() {
          var arz;
          arz = $(".col-1-2");
              arz.animate({width: "50%"},{ duration: 2000, queue: false });
              arz.off("mousedown mousemove mouseup").on("mousedown", function() {
              $(window).on("mousemove", function() {
                  isDragging = true;
                  $(window).off("mousemove")
              })
          })
              .on("mouseup", function() {
                  var wasDragging = isDragging;
                  isDragging = false;
                  $(window).off("mousemove");
                  if (!wasDragging) {miniPage(this.id);}
              })
          }
      }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
        var isDragging = false;
        $(".col-1-2").on("mousedown", function() {
         $(window).on("mousemove", function() {
          isDragging = true;
          $(window).off("mousemove")
         })
        })
        .on("mouseup", function() {
         var wasDragging = isDragging;
         isDragging = false;
         $(window).off("mousemove");
         if (!wasDragging) {miniPage(this.id);}
        })
       });
       $(function() {
        var isDragging = false;
        $(".call-to-action").on("mousedown", function() {
         $(window).on("mousemove", function() {
          isDragging = true;
          $(window).off("mousemove")
         })
        })
        .on("mouseup", function() {
         var wasDragging = isDragging;
         isDragging = false;
         $(window).off("mousemove");
         if (!wasDragging) {miniPage2();}
        })
       });
       
         function miniPage(activeTab) {
        var arz;
           arz = $(".col-1-2");
          var elmnt = $("#" + activeTab);
              var isDragging = false;
           if (elmnt.prop('style')['width'] != "80%") {
             arz.animate({width: "20%"},{ duration: 2000, queue: false });
               arz.removeClass("showContent hideContent");
               arz.addClass("hideFeature miniPage");
               elmnt.removeClass("hideFeature miniPage");
                     elmnt.addClass("hideContent");
          elmnt.animate({width: "80%"},{ duration: 2000, queue: false });
          elmnt.delay(2000).queue(function(){elmnt.addClass("showContent").dequeue();});
          arz.off("mousedown mousemove mouseup").on("mousedown", function() {
                 $(window).on("mousemove", function() {
                  isDragging = true;
                  $(window).off("mousemove")
                 })
                })
                .on("mouseup", function() {
                 var wasDragging = isDragging;
                 isDragging = false;
                 $(window).off("mousemove");
                 if (!wasDragging) {miniPage(this.id);}
                })
                elmnt.off("mousedown mousemove mouseup");
            } else {
              arz.animate({width: "50%"},{ duration: 2000, queue: false });
                  arz.removeClass("showContent");
                     arz.delay(2000).queue(function(){arz.removeClass("hideFeature hideContent").dequeue();});
            }
       }
       
       function miniPage2() {
           var arz;
           arz = $(".col-1-2");
              var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
              var isDragging = false;
             arz.animate({width: "50%"},{ duration: 2000, queue: false });
                 arz.removeClass("showContent");
                  arz.delay(2000).queue(function(){arz.removeClass("hideFeature hideContent").dequeue();});
                  arz.off("mousedown mousemove mouseup").on("mousedown", function() {
             $(window).on("mousemove", function() {
              isDragging = true;
              $(window).off("mousemove")
             })
            })
               .on("mouseup", function() {
                var wasDragging = isDragging;
             isDragging = false;
             $(window).off("mousemove");
             if (!wasDragging) {miniPage(this.id);}
            })
       }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.col-1-2 {
    width: 50%;
    height: 200px;
    display: inline-block;
  }
  #id1 {
   background-color: red;
  }
  #id2 {
    background-color: blue;
  }
  .call-to-action {
    display: none;
    padding: 20px;
    background-color: white;
    border: solid 1px black;
  }
  .col-1-2.showContent .call-to-action {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;div style="width: 100%"&gt;
    &lt;div id="id1" class="col-1-2"&gt;
      &lt;div class="call-to-action"&gt;
        test
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="id2" class="col-1-2"&gt;
      &lt;div class="call-to-action"&gt;
        test
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>P.S1: The main problem here is that my miniPage triggered when it's not suppose to (when I click the button, first miniPage2 will trigger, then miniPage2), I know it's fine, cause if I comment miniPage2 it will not trigger anymore and just do nothing, but somehow when I add miniPage2 something will break and I don't have any idea what is it and why is that? I'm pretty confused, any help would be appreciated! &lt;3</p>
  
  <p>P.S2: try to ignore typos, i tried to minify code, so maybe I miss something.</p>