title: Jquery hide and show a button
body: <p>First off, I've read extensively by now into what seem to be recurrent questions about how to hide a div after a properly detecting a click, or event, outside the div; indeed this has influenced my javascript code.  But I'm a newbie and it's not working so I hope you can help me out.  </p>
  
  <p>Second, the jfiddle - <a href="https://jsfiddle.net/u5uzexqk/" rel="nofollow noreferrer">https://jsfiddle.net/u5uzexqk/</a> ... please note the button should show when the any section of the search bar or indeed button is clicked on; and not show when a click anywhere outside is detected.</p>
  
  <p>Before the code, I would just like to point out I have also read into the e-propagation thing, however I don't think it's the absence of that which is the problem; if it is, my profuse apologies.</p>
  
  <p>Perhaps owing to the fact I'm new to Javascript, I can't see how the suggested answer from another question helps; the Jfiddle on the most popular answer seems to do the opposite - remove the menu when the menu link is clicked again.</p>
  
  <p>Html</p>
  
  <pre><code>&lt;body&gt;
  
  
          &lt;div id = "wrapper"&gt;
          &lt;form action="" class="search-form"&gt;
              &lt;div class="cell"&gt;
                  &lt;input type="text" name="q"&gt;
              &lt;/div&gt;
              &lt;div class="cell button-holder"&gt;
                  &lt;button type="submit" id="dropdownbutton"&gt;
                      &lt;span&gt;Search&lt;/span&gt; 
                  &lt;/button&gt;    
              &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$("#wrapper").onclick(function (e){
  
  document.getElementById('#dropdownbutton').style.visibility = 'visible';
  }
  
  $(document).mouseup(function (e)
  {
  
  var container = $("#wrapper");
  
  if (!container.is(e.target) // if the target of the click isn't the container...
      &amp;&amp; container.has(e.target).length === 0) // ... nor a descendant of the container
  {
      $("#dropdownbutton").hide();
  }
  });
  
  });
  </code></pre>