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");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="get">
<div>
<input type="text" name="search" title="search" class="search" id="search" placeholder="Enter text here"/>
</div>
<button type="submit" class="submit-button" id="submit-button" name="submit" style="display: none">Click to Search</button>
</form>
Note: I can do it with click
function. But I want to do it with focus
and blur