JQuery - show / hide search field

Question

I wrote a little jQuery to open a search box when I click on a div. Basically, when clicked, it shows a div that is initially hidden and inside that div is a search box and a close button. It all works fine. However, the close button does not work. My guess is that the close button does not hide this div, because it itself is inside the div. Here is what I have here as well jsfiddle .

HTML

<ul class="tert-nav"> <li><img alt="" border="0" src="images/icon-cart.png" width="16" height="16" /></li> <li><img alt="" border="0" src="images/icon-tickets.png" width="16" height="16" /></li> <li class="searchit"> <img alt="" border="0" class="searchicon" src="images/icon-search.png" width="16" height="16" /> <div class="searchbox"> <img alt="" border="0" class="closesearch" src="images/icon-close.png" width="16" height="16" /> <input placeholder="search..." type="text" /> <input type="submit" value="" /> </div> </li> </ul> 

JQuery

 $(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'); }); }) 

CSS

 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; } 

In addition, here is an example image of the initial state and the state of the click / open, to give a visual representation of what I'm trying to do. Thanks!

Answer 1

Since the close button is inside the .searchit field, the first handler also starts immediately after. Stop the propagation of the click event during the close handler and it should work:

 $('ul.tert-nav li.searchit img.closesearch').click(function(e) { e.stopPropagation(); $('.searchbox').hide(); $('ul.tert-nav li').removeClass('search'); }); 

Answer 2

An alternative to stopPropagation() is to allow the div to do this if the div been pressed.

This can come in handy if you have many elements inside the control with your own click events, and you do not want to update them all, or if you need the click event to propagate, but still want to be able to distinguish internally in some click events along the way.

Although in your specific situation stopPropagation() will be easier off course.

 $('ul.tert-nav li.searchit').click(function (event) { // Did the click originate from this? if(event.target !== this){ // No, it wasn't. So we do nothing. return; } $(this).addClass('search'); $('.searchbox').fadeIn(); $('ul.tert-nav li img.searchicon').hide(); }); 

---

DEMO - check the source of the click event

---