jonnykates
8/1/2017 - 3:13 PM

Slide out search input in header

Slide out search input in header

// Expose the search bar
$('.headerContent .searchContainer button').on('click', function(event) {
	var theSearchInput = $(this).siblings('#siteSearch');

	if(!$(theSearchInput).hasClass('searchExposed')) {
		event.preventDefault();
		$(theSearchInput).addClass('searchExposed');
		$(theSearchInput).focus();
	}
});

// Close the search bar if we click anywhere else
$(document).on('click', function(e) {
	if(!$('.searchContainer').children().is(e.target)) {
		$('#siteSearch').removeClass('searchExposed');
	}
});
header .searchContainer #siteSearch {
	width: 0;
	transition: width $transition-duration $transition-curve;
	&.searchExposed {
		width: 260px;
	}
}