SO Question

http://stackoverflow.com/q/5547981/435873 Hiding search when not in focus, toggle when link clicked.

by leomwa

HTML

<br />
<div id="searchBoxContainer" class="ui-form-bg ui-float-right">
    search div<br />
    <input type="text" id="mySearchBox" />&nbsp;<button value="search">search</button>
</div>
<br />
<a href="#toggleSearch" id="toggleSearchOn">reveal search</a>
<p class="ui-pad-top">
    Clicking on anything *outside* the search &lt;div&gt; element will hide the search functionality.
    <br />
    Clicking on 'reveal search' link above will unhide the &lt;div&gt; element.
</p>
<br />
Link to question at StackOverflow: http://goo.gl/QfrfP

CSS

.ui-form-bg{
    background-color:#EAECED;
    border: 1px solid #CFCFCF;
    padding:4px;
    font-size:90%;
}
.ui-float-right{
    float:right;
}
.ui-pad-top{
    padding-top:3em;
}

JavaScript

(function toggleSearchField() {
    var $searchBoxDiv = $('#searchBoxContainer');

    $(document).bind('click', function(evnt) {
        var $target = $(evnt.target);

        if ($target.is('#toggleSearchOn')) {
            $searchBoxDiv.fadeIn();
            return;
        } else if ($target.is('#searchBoxContainer') || $searchBoxDiv.has(evnt.target).length) {
            return;
        }

        $searchBoxDiv.hide();
    });
})();