title: jQuery - show/hide search box
body: <p>I've written a little jQuery to slide open a search box when a div is clicked. Basically, on click it shows a div that's initially hidden &amp; inside that div is a search box and a close button. That's all working fine. What isn't working however is the close button. My guesses are that the close button is not hiding that div because it itself is inside the div. Here's what I've got and here's a <a href="http://jsfiddle.net/U63sH/1/" rel="nofollow noreferrer">jsfiddle</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul class="tert-nav"&gt;
      &lt;li&gt;&lt;img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /&gt;&lt;/li&gt;
      &lt;li class="searchit"&gt;
          &lt;img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" /&gt;
          &lt;div class="searchbox"&gt;
              &lt;img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" /&gt;
              &lt;input placeholder="search..." type="text" /&gt;
              &lt;input type="submit" value="" /&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
  
  // Search
  $('ul.tert-nav li.searchit').click(function() {
      $(this).addClass('search');
      $('.searchbox').fadeIn();
      $('ul.tert-nav li img.searchicon').hide();
  });
  
  $('ul.tert-nav li.searchit img.closesearch').click(function() {
      $('.searchbox').hide();
      $('ul.tert-nav li').removeClass('search');
  });
  
  })
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>ul.tert-nav {
      float: right;
      position: absolute;
      margin: 0;
      padding: 0;
      right: 0;
      top: 0;
      list-style: none;
  }
  
  ul.tert-nav li {
      float: right;
      width: 26px;
      height: 28px;
      background: #3c3c3c;
      text-align: center;
      margin-left: 2px;
      cursor: pointer;
      transition: all .2s ease;
      -o-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -webkit-transition: all .2s ease;
  }
  
  ul.tert-nav li:hover {
      background: #000;
  }
  
  ul.tert-nav .search {
      width: 246px;
      text-align: left;
      cursor: default;
  }
  
  ul.tert-nav .search:hover {
      background: #3c3c3c;
  }
  
  ul.tert-nav .searchbox {
      display: none;
      width: 100%;
  }
  
  ul.tert-nav .searchbox .closesearch {
      float: left;
      margin: 6px 4px 0px 4px;
      cursor: pointer;
  }
  
  ul.tert-nav .searchbox .closesearch:hover {
      opacity: 0.8;   
  }
  
  ul.tert-nav .searchbox input[type=text] {
      float: left;
      width: 184px;
      height: 24px;
      padding: 0px 0px 0px 10px;
      margin: 2px 0px 0px 0px;
      border: none;
      background: url(images/search-bg.png) no-repeat;
      outline: none;
  }
  
  ul.tert-nav .searchbox input[type=submit] {
      float: left;
      width: 26px;
      height: 24px;
      margin: 2px 0px 0px 0px;
      padding: 0px;
      border: none;
      background: url(images/search-btn.png) no-repeat;
      outline: none;
      cursor: pointer;
  }
  </code></pre>
  
  <p>Also, here's an example image of the initial state and the clicked/opened state to give a visual idea of what I'm trying to do. Thanks!</p>
  
  <p><img src="https://i.stack.imgur.com/0eXHN.png" alt="enter image description here"></p>