jQuery - show/hide search box

Question

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

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!

Solution 1

Because the close button is inside the .searchit box, the first handler is also being fired right 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');
});

Solution 2

Alternative to stopPropagation() is to only let the div do it's thing if it was the div that was clicked on.

This can come very handy if you have either lot of elements inside the control with their own click events and you don't want to update all of them or if you need to let the click event propagate but still want to be able to distinguish within in some click events along the way.

Though 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 - Validate the source of the click event

---

Comments

[Trevan Hetzel]

Perfect! Makes sense & I even tried to stop the propagation but I think I just didn't add the (e) :)