title: Toggle div on click or touch and hide on click/touch outside
body: <p>I'm trying to support both mouse and touch events for a div that I want to show and hide. My mouse events work well, but I'm not sure of how to get this to work on a touch-based device (iPhone, iPad or Android-based phone).</p>
  
  <p>The interaction should be that when a user clicks or touches the trigger, the "search" box is shown, and if they click/touch outside of the opened search box OR re-click/touch the trigger, it should close (hide).</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;div id="search"&gt;
      &lt;div class="search-link"&gt;
          &lt;a href="#search" class="search-nav-button" id="search-trigger"&gt;Search&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="search-box"&gt;
          &lt;form action="/search" id="search_form"&gt;
              &lt;input placeholder="Search" type="text" /&gt;
              &lt;input id="search-submit" type="submit" value="Submit" /&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And, my JavaScript (using jQuery):</p>
  
  <pre><code>var $searchBox = $('#search .search-box');
  var $searchTrigger = $('#search-trigger');
  
  $searchTrigger.on("click", function(e){
      e.preventDefault();
      e.stopPropagation();
      $searchBox.toggle();
  });
  $(document).click(function(event){
      if (!($searchBox.is(event.target)) &amp;&amp; ($searchBox.has(event.target).length === 0)){
          $searchBox.hide();
      };
  });
  </code></pre>
  
  <p>Working example: <a href="http://jsfiddle.net/T5HMt/" rel="nofollow">http://jsfiddle.net/T5HMt/</a></p>