search jquery effect

by lemon kazi

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="search">
  <i class="material-icons">search</i>
  <form>
    <input type="text" name="search" />
  </form>
</div>

CSS

.search.active {
  background: rgba(0, 0, 0, 0.4);
  width: 500px;
}

.search.active form {
  display: inline-block;
}

.search {
  margin-top: 25px;
  margin-right: 25px;
  background-color: #448aff;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all 500ms ease;
}

.search > i {
  line-height: 50px;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

JavaScript

$(document).ready(function() {
  $(".search").click(function() {
    $(this).toggleClass("active");
  });
  $(document).click(function(e) {
    if (!$(e.target).closest(".search").length) {
      $(".search.active").removeClass('active');
    }
  });
});