toggle search button

by Pranab Dey

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="form-group">
        <input type="text" class="form-control pranab" name="Search" id='nav-search' placeholder="Search">
    </div>
    <input type="submit" name="search" value="Search" class="btn btn-default" >

CSS

.pranab{
    width: 300px;
    -webkit-transition: width 1s ease-in-out;/*for chrome,IE,Edge*/
    -moz-transition:width 1s ease-in-out;/*for mozilla*/
    -o-transition: width 1s ease-in-out;/*for opera*/
    transition: width 1s ease-in-out;
   float:left;
}
 /*.pranab:focus{
    width: 500px;
}*/

JavaScript

$(function(){
	$(".pranab").hide();
});
$(function(){
	$(".btn").click(function(){
  		$(".pranab").toggle("fast");
  });
});