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.


Web Design & Development Indonesia

Menu and Form
There we can see 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 menu, because that is the most important part to form the appearance of the hidden search form.