Expanding Search Bar using simple jquery

(function ( $ ) {
	$.fn.uisearch = function(options ) {
		
	var settings = $.extend({
            type: 'text'
	}, options );
	
	var type = settings.type;
	var uiinput = this.find('input[type="'+ type +'"]')
	uiinput.addClass('inactive');
	
	var uisubmit = this.find('input[type="submit"]');
		uisubmit.click(function(e){
		var uiinputlength = uiinput.val().length;
		if(!uiinputlength){e.preventDefault();uiinput.toggleClass('active');} 
	});
	}
}( jQuery ));

<div class="ui-search">
	<form>
		<input type="text" />
		<input type="submit" />
	</form>
</div>

.ui-search
{
	float: right;
	padding: 10px 0;
}
.ui-search form 
{
	margin: 0;
}
.ui-search input[type="text"].active
{
	width: 200px;
	opacity: 1;
}
.ui-search input[type="text"]
{
	width: 1px;
	-o-transition: 1s;
	-ms-transition: 1s;
	-moz-transition: 1s;
	-webkit-transition: 1s;
	transition: 1s;
	opacity: 0;
}
.ui-search input[type="submit"]
{
	margin-left: -5px;
}
.navbar-collapse
{
	float: right;
}
.ui-search input[type="submit"] 
{
	 
	border: none;
	outline: none;
	background-color: transparent;
	padding-top: 15px;
	padding-right: 14px;
	font-size: 0;
	padding-left: 61px;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(search.png);
	 
}

<script>
	jQuery(document).ready(function(){
		jQuery('.ui-search').uisearch({type: 'text'});
	});
</script>