Slide Search

by pj_js15

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<input id="filter" type="text" placeholder="Search" />
<i id="filtersubmit" class="fa fa-search"></i>

<br /><br />

<div class="search-container hidden">
  <input class="search-field" />
  <i id="icon-site-search" class="fa fa-search icon-search"></i>
  <i class="fa fa-close icon-close-search"></i>
</div>

CSS

#filtersubmit {
    position: relative;
    z-index: 1;
    left: -25px;
    top: 1px;
    color: #7B7B7B;
    cursor:pointer;
    width: 0;
}

.search-container{
  padding: 10px;
  position: relative;
}

#icon-site-search{
  position: relative;
  
}
.icon-close-search{
  position: relative;
}

.search-container.hidden .search-field,
.search-container.hidden .icon-close-search{
  display: none;
}


.search-container.expanded .icon-search
{
  left: -25px;
}
.search-container.expanded .icon-close-search{
  left: -20px;
}

.icon-close-search:hover,
.icon-search:hover{
  cursor: pointer;
}

JavaScript

$().ready(function(){
	
  $('#icon-site-search').on('click', function(){
    $(this).parent().addClass('expanded');
    $(this).parent().removeClass('hidden');
    
    if($('.search-field').is(":visible") && $('.icon-close-search').is(':visible') && $('.search-field').val() != ''){
    	console.log('submitting the search form');
    }
  });
  
  $('.icon-close-search').on('click', function(){
  	$('.search-field').val('');
    $(this).parent().addClass('hidden');
    $(this).parent().removeClass('expanded');
  });
  
});