toggleClass

Toggles class for Search text by clicking. Makes visible when clicked anywhere else.

by Paul Schmitt

HTML

<nav>
    <div class="header-search">
        <img src="http://www.gargantuan-media.com/wordpress/wp-content/uploads/2015/05/search-icon-22px.png" class="show">
    </div>
</nav>

CSS

nav {
    width:100%;
    height: 75px;
    background-color:#6fa81a;
    z-index:1;
}
.header-search {
    width:22px;
    background-color:red;
    z-index:2;
}
.header-search p {
    text-align:right;
    font: Arial, sans-serif;
    font-size: 12pt;
    color: #000;
    letter-spacing: 1px;
    font-weight: normal;
}
.show {
    display: block;
}
.hide {
    display: none;
}

JavaScript

$(document).ready(function () {
    $(".header-search").click(function () {
        $(".header-search img").toggleClass("show hide")
    });
});

$(document).mouseup(function (e) {
    var container = $(".header-search img");

    if (!container.is(e.target) // if the target of the click isn't the container...
    &&
    container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.removeClass("hide");
    }
});