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
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.

It can be seen there that we use the display:none property on the ID #searchbar 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. When visitors click 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