jQuery easyHide plugin - a simple plugin to hide stuff by clicking anywhere on the document (other than the element) or by hitting ESC.

jquery.easyHide.js

;(function ($) {
    $.fn.easyHide = function (opts) {
        opts = opts || {};
        opts["hideFn"] = opts["hideFn"] || function () {
            this.hide();
        };

        return this.each(function () {
            var $this = $(this);
            if (opts["onDocClick"] !== false) {
                $(document).click(function (e) {
                    if (e.target != $this[0] && !$.contains($this[0], e.target)) {
                        opts["hideFn"].call($this);
                    }
                });
            }
            if (opts["onEsc"] !== false) {
                $this.keyup(function (e) {
                    if (e.keyCode == 27) {
                        opts["hideFn"].call($this);
                    }
                });
            }
        });
    };
})(jQuery);

z_example.html

<form method="GET" action="search">
    <input placeholder="Enter keyword &hellip;" name="q" type="text" style="display:none">
    <button type="submit">Search</button>
</form>

<script>
    var $form = $("form"), $inp = $form.find("input[type=text]");
    $form.find("button").on("click", function (e) {
        if ($inp.is(":hidden")) {
            $inp.slideDown("fast").focus();
            e.preventDefault();
        }
    });
    $form.easyHide({
        hideFn: function () {
            $inp.slideUp("fast");
        }
    });
</script>