Make for appear when you click another item:

[jayg-7]

Hello, on this page: http://bit.ly/1GtSrde

I need to make form.search-form on the menu go from display:none to display block

when the user clicks “li.search.icon.menu-item” on the secondary menu.

I think I need to use javascript to do this?

Any help will be greatly appreciated!

Jay

[Draz]

Since you have jquery available you could make a simple click handler

This part will make it show up and set focus to it:

$("li.search.icon.menu-item").click(function() {
    $("form.search-form").show().focus();
});

While as a soon as focus is removed this bit will hide it again

$("form.search-form").on( "blur", function(){
  $("form.search-form").hide();
});

[michaellee]

You could use simple class states.

So in your CSS you could have

form.search-form{
  display: none;
}

form.search-form.is-showing{
  display: block;
}

Then in your JavaScript (assuming you use jQuery), you could toggle the class on and off.

$("li.search.icon.menu-item").on("click", function(){
  $("form.search-form").toggleClass("is-showing");
});

[Author]

Posts