how can i expand input field on click?


How can i expand input field when i click on on search icon, smoothly?

Something similar to above search button on this website

Here is the similar fiddle link, but transition is not smooth in it


Asked by:- neena
2
: 4528 At:- 7/3/2017 4:05:06 PM
jQuery javascript html css







1 Answers
profileImage Answered by:- vikas_jk

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.

3
At:- 7/3/2017 4:19:56 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use