title: Jquery toggle issue using jquery ui effect
body: <p>I'm using this code to toggle a search bar.</p>
  
  <pre><code>    $(".search_button").click(function() {
          $("#search").toggle("bounce", {direction: "up"}, 150);
      });
  </code></pre>
  
  <p>Also i'm hidding the search bar by clicking anywhere on the screen with this code</p>
  
  <pre><code>    $(document).mouseup(function (e)
      {
          var container_search = $("#search");
  
          if ( ! container_search.is(e.target) // if the target of the click isn't the container...
          &amp;&amp; container_search.has(e.target).length === 0) // nor a descendant of the container
          {
              container_search.hide("drop", {direction: "up"}, 400);
          }
      });
  </code></pre>
  
  <p>Issue is that by implementing this above code toggle doesn't work. it's just doing show the search bar every time i click. it hides the bar then show it again. . . only i can hide the bar by just click  outside of the search bar.</p>