i have a search icon at the top of my page, when i click this it
toggles show/hide on the search form.
now when the user loses focus of the search form (.blur), i want it to
activate the hide part of the toggle.
when the search icon is clicked, it gives focus to the search form, so
the moment the icon is clicked, the search form gains focus, then when
someone clicks somewhere else on the page and the form loses focus, i
want the search form to hide.
the problem is, if i just have the search form hide on .blur, then
when you click the search icon and then click somewhere else and the
search form loses focus, and then you click the icon to show the
search form again, it will hide the search form(to the user, it looks
like it didn't do anything, since the search form is already hidden).
so after 2 clicks on the icon, then, it finally shows the search form
again.
Here's my code:
.searchbutton is the search icon mentioned above. and
#search is my Search Form mentioned above.
Code:
$('.search_button').toggle(
function ()
{
$('#search')
.stop().animate({"left":"-5px"}, function() {$('#search').focus
();})
},
function ()
{
$('#search')
.stop()
.animate({"left":"230px"}, 300);
});
how do i get it so that when the search form looses focus(.blur), it
toggles. How do i do this without breaking the toggle?
