Create a gist now

Instantly share code, notes, and snippets.

Embed
Search Click Functions
/* 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 */
<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 Trigger
$(".search-icon").on('click', function() {
$('.search-trigger').toggleClass('display-block');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment