title: How to show when click away
body: <p>I have created a mobile nav, when click on the search icon it will expand and the logo next to it will disappear by adding the class hide. But I don't know how to get the icon back when I click away. Can anyone help me please? Thank you!</p>
  
  <p><strong>Nav bar</strong></p>
  
  <p><a href="https://i.stack.imgur.com/qbiA9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qbiA9.png" alt="enter image description here"></a></p>
  
  <p><strong>Nav bar with expanded search</strong></p>
  
  <p><a href="https://i.stack.imgur.com/dOuUV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dOuUV.png" alt="enter image description here"></a></p>
  
  <p>Following is the code:</p>
  
  <pre><code>&lt;form class="mobile-search-container" action="https://www.tumblr.com/Search"&gt;
     &lt;input id="search-box" type="text" class="search-box" name="q" /&gt;
     &lt;label for="search-box"&gt;&lt;i class="material-icons search-icon"&gt;search&lt;/i&gt;&lt;/label&gt;
     &lt;input type="submit" id="search-submit" /&gt;
  &lt;/form&gt;
  &lt;script&gt;
      document.addEventListener("touchstart", function(){}, true);
  &lt;/script&gt;
  &lt;a href="#" class="header-logo d-flex flex-align-items-center" id="header-logo"&gt;&lt;/a&gt;
  &lt;script&gt;
      $("#search-box").click(function(){
      $("#header-logo").addClass("hide");
      });
  
  &lt;/script&gt;
  </code></pre>