Hide/Show DIV when element is clicked

hide-show-div-when-element-clicked.html

<form id="sForm" name="sForm" method="POST">
  <!-- DIV containing textfield, always display -->
  <div id="inside" name="inside" class="inside">
    <input type="text" id="searchText" name="searchText" maxlength="25" placeholder="search for games" autocomplete="off" tabindex="1" style="z-index:500" />
  </div>
  
  <!-- DIV of wrapping block -->
  <div id="outside" name="outside" class="outside hidden">
    <div class="hd">
      <div id="closeBtn" name="closeBtn" class="right btnClose">X</div>
      Search
    </div>
    <div class="bd">
      <div class="right btnSearch">
        <input type="submit" value="" title="Search" alt="Search" name="submit_searchbox" id="submit_searchbox" tabindex="3" />
      </div>

      <br>

      <div style="padding:30px 0 5px 5px;">
        <label>Category</label>
          <select id="category">
            <option value="all">All</option>
            <option value="ps3">PlayStation 3</option>
            <option value="xbox360">Xbox 360</option>
            <option value="wii">Wii</option>
          </select>
      </div>
    </div>
    <div class="ft"></div>
  </div>
</form>

hide-show-div-when-element-clicked.js

$(document).ready(function() {
  $(document).click(function(e) {
    // Checks if the element you clicked has #outside div as parent
    if ($(e.target).closest('#outside').size() == 0) {
      if ((e.target.id) == 'searchText') {
        $('#outside').fadeIn(200);
      } else {
        $('#outside').fadeOut(200);
      }
    } else {
      // If target element has #outside as parent, keep it visible at all times
      $('#outside').fadeIn(200);
    }
  });
    
  $('#closeBtn').click(function(e) {
    // To halt the click queue
    e.stopPropagation();
    $('#outside').fadeOut(200);
  });
});