Cacher is the code snippet organizer for pro developers

html,
body {
  margin: 0;
  padding: 0;
}

header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #000;
}

#search-toggle {
  position: absolute;
  width: 150px;
  height: 100%;
  top: 0;
  right: 0;
  cursor: pointer;
  background-color: #fff;
  border-color: #000;
  font-size: 20px;
  color: #000;
}
.search-form {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 0;
  z-index: 10;
  background-color: #063C40;
  overflow: hidden;
  transition: 0.3s;
  background-color: purple;
}

.search-form .search-box input[type=text],
.search-form .search-box input[type=password],
.search-form .search-box input[type=url],
.search-form .search-box input[type=email] {
  border-radius: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  padding-right: 35px;
  font-size: 16px;
  background-color: purple;
  padding-left: 20px;
  border: 0;
  color: #fff;
}

.search-form input[type=submit] {
  position: absolute;
  background-color: transparent;
  border: 0;
}

.search-form .close {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 50%;
  right: 30px;
  margin-top: -10px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  cursor: pointer;
}

.search-form .close::before {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 8px;
  border-top: solid 2px #370048;
  border-right: solid 2px #370048;
  content: '';
}

.search-form .close::after {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 8px;
  border-left: solid 2px #370048;
  border-bottom: solid 2px #370048;
  content: '';
}

.search-form .close:hover::before,
.search-form .close:hover::after {
  border-color: #fff;
}

.search-form.active {
  height: 60px;
}


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

jQuery(function($){
    navigation();  // Call Navigation Function
});
/* ========================================================================= */
/* NAVIGATION FUNCTION */
/* ========================================================================= */
function navigation() {
    $mobile_search = $("#header-search");
    $("#search-toggle").on('click', function() {
        $mobile_search.toggleClass('active');
    });
    $mobile_search.find(".close").on('click', function() {
        $mobile_search.removeClass("active");
    });
    $(document).on('click', function() {
        if( !$(event.target).closest("#header-search").length && !$(event.target).closest("#search-toggle").length ) {
            $mobile_search.removeClass("active");
        }
    });
}

<header>
  <button class="search-icon" id="search-toggle">Search</button>
  <form class="search-form" id="header-search">
    <div class="search-box">
      <input type='text' name="search" value="" placeholder="Search...">
    </div>
    <input type="submit">
    <span class="close"></span>
  </form>
</header>