Search Form - Input Slide In
<form action="#search" method="POST" class="form-inline js-slide-in-parent js-slide-in-form">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default js-slide-in-close js-hide"><i class="fa fa-times"></i></button>
</span>
<input type="text" class="form-control pull-right js-slide-in-child js-hide" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default js-slide-in-open"><i class="glyphicon glyphicon-search"></i></button>
<a href="#cart" class="btn btn-default"><i class="glyphicon glyphicon-shopping-cart"></i> 3</a>
</span>
</div>
</form>
(function slideIn(){
var slideInOpen = function(e){
e.preventDefault();
var $this = $(this);
$this.closest('.js-slide-in-parent').find('.js-slide-in-close').animate({width: 'show'});
$this.closest('.js-slide-in-parent').find('.js-slide-in-child').animate({width: 'show'});
$('.js-slide-in-close').one('click', slideInClose);
};
var slideInClose = function(e){
e.preventDefault();
var $this = $(this);
$this.closest('.js-slide-in-parent').find('.js-slide-in-close').animate({width: 'hide'});
$this.closest('.js-slide-in-parent').find('.js-slide-in-child').animate({width: 'hide'});
$('.js-slide-in-open').one('click', slideInOpen);
};
$('.js-slide-in-open').one('click', slideInOpen);
})();