jenhuls
6/20/2016 - 2:00 PM

Expanding Search (WordPress search code used as example). Gist includes HTML, CSS and JS.

Expanding Search (WordPress search code used as example).

Gist includes HTML, CSS and JS.

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
	<div>
  	<label for="Replace">Replace</label> 
  	<i class="fa fa-search">&nbsp;</i>
  	<input class="site-search" type="text" name="s" id="s" value="" tabindex="0" placeholder="Replace"> 
  	<input type="submit" id="searchsubmit" value="GO">
  </div>
		
</form>
//jQuery expanding search bar
var box = $("#searchform");
// Code for closing if anywhere else is clicked
$(document).click(function() {
	box.removeClass('expanded');
});
$("#searchform").click(function(e) {
	e.stopPropagation();
	// preventing parent click handler 
	box.addClass("expanded");
	// Adding class to the box
});
box.click(function(e) {
	e.stopPropagation();
	// preventing parent click handler 
});
/* ==[ Site Search Settings ]== */
		/*-------------------------------------*/
		
		form#searchform {
			position: relative;
			left: 0;
			top: 5px;
		}
		
		
		/*-------------------------------------*/
		
		#searchform i {
			position: absolute;
		    top: 0;
		    left: 0;
		    font-size: 18px;
		    color: #fff;
		    cursor: pointer;
		    background: #6dcbdf;
		    width: 25px;
		    height: 25px;
		    text-indent: 3px;
		}
		
		
		/*-------------------------------------*/
		
		#searchform label,
		#searchform input[type=submit] {
			display: none;
		}
		
		
		/*-------------------------------------*/
		
		#searchform input[type=text] {
			padding: 0;
			margin: 0;
			height: 25px;
			width: 0;
			border: none;
			outline: none;
			color: #092541;
			font-size: 16px;
			text-indent: 30px;
			transition: all .4s ease;
		}
		
		#searchform input[type=text]:before {
			content: '\f002';
			font-family: FontAwesome;
			color: #092541;
			font-size: 20px;
		}
		
		#searchform input[type=text]:focus {
			background-color: #fff;
			width: 295px;
		}
		
		#searchform.expanded {
			width: 295px;
		    opacity: 1;
		    font-weight: normal;
		    font-style: normal;
		    background-color: #fff;
		}
		#searchform.expanded input[type=text] {
			width: 295px;
		}