In today’s web tutorial, we will learn how to build a hidden search form with a toggle button to reveal it. This toggle enabled search form is a popular function nowadays and is used on many websites and blogs. It saves space on your website, is unobtrusive and gives your users a clean way to perform their searches. So, if you are trying to integrate a search form on your website that takes very little space, read this tutorial to know how to build it.
Get Started
This tutorial makes use of jQuery and the Font Awesome Icon Library. You can reference these libraries from their respective CDN or download them separately and include them in your code. Open a new HTML file and add the jQuery & Font Awesome libraries just before the closing head tag. You can also copy from the following code.
[tabby title=”HTML”]
<html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <style></style> </head> <body> </body> </html>
[tabbyending]
The Search Form
Lets build the search form that will contain an input field and a button. Add the following HTML code to your file after the <body> tag. This will display an input field and a button with the search glass icon. Now we need to style the search form to make it look good. Copy the CSS code and paste it between the <style></style> tags of your HTML file. Notice how we are using the property display:none in the .searchform class to hide the search form as we will use the toggle button to make it visible.
[tabby title=”HTML”]
<form class="searchform">
<input class="searchfield" autocomplete="off" name="q" type="search"
placeholder="Enter Search Text" />
<button class="submitbtn fa fa-search" type="submit"></button>
</form>
[tabby title=”CSS”]
body {
margin:0;
padding:0;
}
.searchform{
margin:0;
display:none;
background:#1995cc;
padding:20px 42px;
text-align:center;
position:relative;
transition:background-color 500ms linear;
}
.searchfield{
border:none;
padding:10px 0;
background:none;
color:white;
outline:none;
border-bottom:1px solid white;
width:80%;
font-size:26px;
}
input::-webkit-input-placeholder {
color: rgba(255,255,255,0.6);
}
.submitbtn{
background:none;
border:none;
font-size:36px;
color:white;
}
[tabbyending]
The Toggle Button
Now we will build the toggle button that will help us to display or hide the search form. Copy the following HTML in the body tag and the CSS styles in the head tag. We have added a transition effect into the button to make it change color as you hover on it.
[tabby title=”HTML”]
<div class="top"> <a class="searchbtn" href="#"><i class="fa fa-search"></i></a> </div>
[tabby title=”CSS”]
.top{
background-color:#1995CC;
position:relative;
display:block;
width:100%;
height:30px;
}
.searchbtn{
font-size:25px;
background:#08f;
position:absolute;
display:inline-block;
width:50px;
height:40px;
padding-top:10px;
right:40px;
text-align:center;
color:white;
text-decoration:none;
background-color:#1995cc;
color:white;
border-bottom:4px solid #215198;
border-radius:0 0 2px 2px;
-webkit-transition: background-color 250ms ease-out, ;
-moz-transition: background-color 250ms ease-out;
-o-transition: background-color 250ms ease-out;
transition: background-color 250ms ease-out;
}
.searchbtn:hover{
background-color:deepskyblue;
}
[tabbyending]
The Magic Script
Now we will add the jQuery script that will do the magic of hiding and showing the search form on click. Copy the following code and place it just above the closing </head> tag. If you run the HTML file now, you will see a search toggle button that will display the sliding search form when you click on it. That’s all folks!
[tabby title=”jQuery”]
<script>
$( document ).ready(function() {
$(".searchbtn").click(function(){
$(".searchform").slideToggle("500");
});
});
</script>
[tabbyending]
