SEARCH FIELD

by jorgeherrera

HTML

<link rel="stylesheet" href=" //cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css">
<form role="form" class="search-form-2"> <button type="button">
  <i class="fa fa-search"></i>
</button>
    <div id="container">
        <div class="search-toggle" style="display:none">
            <input type="text" class="search-form" autocomplete="off" placeholder="Search" size="25" />
        </div>
    </div>
</form>

CSS

i.fa {
    cursor: pointer;
    position: relative;
    left: 300px;
    top: 30px;
    z-index: 10000;
    opacity: 0.8;
}
input.search-form {
    padding: 10px;
}
#container {
    width: 300px;
}
.search-toggle {
    float: right;
}

JavaScript

// Toggles Search Bar on click
$("i.fa.fa-search").click(function () {
    $(".search-toggle").animate({
        width: 'toggle'
    });
});