how can i expand input field on click?

You can do this with the following code:

jQuery

    $('.icon').click(function () {
        $('.search').toggleClass('expanded', 500);
    });

CSS

.search {
    width: 200px;
    max-width:0;
    padding: 5px;
    transition: all .5s ease;
    position:absolute;
    right:20px;
    box-sizing:border-box;
    opacity:0;
}
.search.expanded {
    max-width:300px;
    opacity:1;
    z-index:10 !important;
    background-color:white;
}
.icon { 
    cursor: pointer
}
.icon i{
     position:relative;
  
    top: 8px;
    font-size:18px
}

HTML

                            <div class="input-group">
                                <div class="pull-left"> 
<input class="form-control search" name="searchText" type="search" placeholder="Search here...." />
</div>
                                <div class="input-group-btn pull-left">
                                    <div class="icon"><i class="fa fa-search"></i></div>
                                </div>
                            </div>

That's it, you are done, from the above code you can create the same search as it is on this website.