Search Click Functions

search.css

    /* Search area-Start */
.search-area {
        text-align: center;
    }

    .search-icon {
        border: 1px solid transparent;
        color: #333;
        display: inline-block;
        font-size: 17px;
        line-height: 16px;
        padding: 10px;
    }

    .search-icon:hover {
        border: 1px solid #ccc;
    }

    .search-trigger {
        display: inline-block;
        height: 39px;
        position: absolute;
        right: 82px;
        width: 0;
        top: 0;
        transition:  .5s;
    }

    .search-trigger.display-block {
        width: 250px;
    }

    .search-trigger input {
        color: #ccc;
        height: 39px;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        padding-left: 10px;
        position: absolute;
        right: 0;
        -webkit-transition: all 0.6s ease 0s;
        transition: all 0.6s ease 0s;
        visibility: hidden;
        width: 0;
        border: 1px solid #ccc;
    }

    .search-trigger input {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        visibility: hidden;
        width: 100%;
    }

    .search-trigger.display-block input {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        visibility: visible;
    }
    /* Search area-End */

search.html

<div class="search-area">
  <a href="#" class="search-icon"><i class="fa fa-search"></i></a>
  <div class="search-trigger">
      <form action="formspree.io/ekramul.bd2015@gmail.com">
          <input placeholder="Search Here" id="search" name="search" type="text">
      </form>
  </div>
</div>

search.js

// Search Trigger
  $(".search-icon").on('click', function() {
      $('.search-trigger').toggleClass('display-block');
  });