Sliding SearchBar

by Dhruvang Gajjar

HTML

<div class="formbar">
  <div class="form">
    <form>
      <input type="text" />
      <button type="submit">submit</button>
    </form>
  </div>
  <div class="toggleIcon">X</div>
</div>

CSS

.formbar {
  width: 500px;
  display: flex;
  flex-direction: row-reverse;
  position:relative;
}

.form {
  float: left;
  width: 500px;
}

form {
    display: flex;
    flex-direction: row;
}

.toggleIcon {
  float: right;
  position:absolute;
}

JavaScript

$(".form").hide();
$('.toggleIcon').click(function() {
  $('.form').animate({
    width: 'toggle'
  });
 	$(this).toggleClass("active"); 
});