Cacher is the code snippet organizer for pro developers

<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);
})();