Show/Hide button for a search field I have made a form where the submit button will show if the text box is focused and the button will hide if the text box is blurred.

These codes work fine. But I wonder if the jQuery code could be more simplified. Or is there any toggle function available?



var search = $("#search");
var button = $("#submit-button");
search.focus(function(){
    button.slideDown("slow");
});
search.blur(function(){
   button.slideUp("slow");
});
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;form action="" method="get"&gt;
    &lt;div&gt;
        &lt;input type="text" name="search" title="search" class="search" id="search" placeholder="Enter text here"/&gt;
    &lt;/div&gt;
    &lt;button type="submit" class="submit-button" id="submit-button" name="submit" style="display: none"&gt;Click to Search&lt;/button&gt;
&lt;/form&gt;




Note: I can do it with click function. But I want to do it with focus and blur
Chaining is the power way in jQuery:



var button = $("#submit-button");
$("#search").focus(function(){
    button.slideDown("slow");
}).blur(function(){
   button.slideUp("slow");
});