Tutorial How to Create a Hidden Search Form With Jquery

Every dynamic website requires a search form, this search form is very useful to make it easier for visitors to find the writing they want quickly.

Every website has a unique and different design, there are times when a designer is confused about where to place the search form because of the lack of space or the absence of a suitable place to put fields to type keywords. So now it is very trending that the search form is hidden and only displays the search icon (magnifying glass). When the icon is clicked, the form will appear and visitors can type keywords there.

expanding dropdown form search

In this tutorial we will try to model a search form like that.

Creating HTML Structure
First we will create the HTML structure first, here I will only write the header section so you don’t get confused, because the other parts are only complementary.

TWD

Web Design & Development Indonesia

Menu and Form
It can be seen that we use the fa-search fa-4x class to display the search icon, which is wrapped in a div with the ID #searchtoggl. In order for the icon to appear, we must first include the css code from the awesome font in the head section of the website. You can read about the use of this awesome font briefly in the article Writing Icons for Website Design.

Beautify With CSS
So that the display looks attractive, we certainly need a css script, here we will only highlight code snippets from the search form and the menu, because that is the most important part to form the appearance of the hidden search form.

header{
padding: 20px 30px;
overflow: hidden;
border-bottom: 1px solid #ddd;
}

.logo{
float: left;
width: 300px;
}

.top-menu{
float: right;
margin-top: 30px;
}

.top-menu ul{
list-style-type: none;
}

.top-menu ul li{
display: inline-block;
}

.top-menu ul li a{
display: block;
padding: 10px;
font-size: 16px;
color: #002633;
}
.top-menu ul li a:hover{
color: #B16B67;
}

searchbar {

display:none;
float:left;
width:100%;
height:62px;
padding-left:25px;
padding-right:10px;
z-index:9999;
background:#f4f4f4;
}

s {

display:block;
width:88%;
borders:0;
outline:none;
height:60px;
line-height:60px;
font-size:2em;
font-weight:700;
color:#676767;
padding:0;
background: #f4f4f4;
}

searchsubmit {

display:block;
float:right;
margin-top:6px;
background:none;
color:#717171;
borders:0;
outline:none;
cursor: pointer;
}
Setting the Header and Search Form
It can be seen there that we use the display:none property on the #searchbar ID so that the search form is lost or not displayed when the website is first run. The form will appear only when the search icon is clicked, and to bring it up we need Jquery to process the trigger event on click, so when the icon is clicked jquery will change display:none to display:block so that the form is visible. And when the icon is clicked a second time then the form will disappear, because with jquery we change display:block back to display:none to hide ID #searchbar

Animation With Jquery
To change the css class easily, we need jquery. If the visitor clicks on the search icon (magnifying glass) in the menu, jquery will change the original class from Font Awesome to .fa-search-minus. From a User Experience (UX) point of view this is fantastic as it helps to differentiate between hidden and visible search fields

$(function(){
var $searchlink = $(‘#searchtoggl i’);
var $searchbar = $(‘#searchbar’);

$(‘.top-menu ul li a’).on(‘click’, function(e){
e.preventDefault();