Toggle WordPress search form on click/tab.

toggle-searchform.js

/**
 * This assumes that the default search form is being used within an element
 * with an ID of "Masthead" and that there is a menu with an ID of
 * "site-navigation" that is toggled off when the search form is toggled on.
 */

jQuery( document ).ready(function( $ ) {
  
  // Handles the focus of the search field in the header.
	$( "#masthead .search-field" ).focus(function() {
		$(this).addClass('open');
		$(this).closest('#masthead').find('#site-navigation').fadeOut();

		$(this).focusout(function(e){

			// Prevent anything from happening right away.
			e.preventDefault();

			// Wait a moment...
			setTimeout(function(){

				// Is the new focused element is the submit button?
				if ( $(document.activeElement).hasClass('search-submit') ) {
					$('.search-submit').focusout(function() {

						// Wait a moment...
						setTimeout(function(){

							// Is the new focused element sometning other than the search field?
							if ( !$(document.activeElement).hasClass('search-field') ) {

								// Close the search form and fade in the menu.
								$('#masthead').find('.search-field').removeClass('open');
								$('#masthead').find('#site-navigation').fadeIn();
							}
						},1);
					});

					// Submit the form!
					return true;
				} else {

					// Close the search form and fade in the menu.
					$('#masthead').find('.search-field').removeClass('open');
					$('#masthead').find('#site-navigation').fadeIn();
				}
			},1);
		});
	});

	// Handles the search submit button in the header.
	$('#masthead .search-submit').click(function(e){

		// Is the search form is already open?
		if ( $(this).closest('.search-form').find('.search-field').hasClass('open') ) {

			// Submit the form!
			return true;
		} else {

			// Prevent the unopened search form from being submitted.
			e.preventDefault();

			// Open the search form and fade out the menu.
			$(this).closest('.search-form').find('.search-field').addClass('open').focus();
			$(this).closest('#masthead').find('#site-navigation').fadeOut();

			// Handler for when the search field loses focus.
			$(this).closest('.search-form').find('.search-field').focusout(function(e){

				// Prevent anything from happening right away.
				e.preventDefault();

				// Wait a moment...
				setTimeout(function(){

					// Is the new focused element is the submit button?
					if ( $(document.activeElement).hasClass('search-submit') ) {

						// Submit the form!
						return true;
					} else {

						// Close the search form and fade in the menu.
						$('#masthead').find('.search-field').removeClass('open');
						$('#masthead').find('#site-navigation').fadeIn();
					}
				},1);
			});
		}
	});

	// Close the search form and fade in the menu when the escape key is pressed.
	$(document).keyup(function(e) {
		if ( e.keyCode === 27 && $('#masthead').find('.search-field').hasClass('open') ) {
			$('#masthead').find('.search-field').removeClass('open');
			$('#masthead').find('#site-navigation').fadeIn();
		}
	});
});