How to Expand Your Site Search on Click

Previously, we talked about implementing a stylish search box in the hero section of your website and talked about how more than 50% of the users are search dominant. Putting a search box in the header section of your website will help your visitors easily find the search box. That being said, sometimes it may not be possible to put a full-width search box in the header due to lack of space. In this tutorial, we'll show you how you can implement an expandable search box in your header so that when users click on it, it will expand to its full size and give users plenty of space to write their search query.

Getting started

In this tutorial, we're using Bootstrap for the structure, FontAwesome for the icons, and JQuery. Place the code below in the head section in your project's HTML file:

HTML

The header HTML below has two levels of navigation: a list of links at the top and a main, more important navigation links at the bottom. It is an example of a header with many links. Feel free to customize the menu for your needs. The search link has a classname of .header--search. We'll be selecting this classname and selecting it in the Javascript code to open and close it. 

CSS

Below is the CSS code both to style and to add the necessary positioning properties to the search box. Copy and paste the code in your CSS file:

Javascript

You can copy and paste the code below and put it in a separate JS file or you can simply put it inside the script tags in your project's HTML file:

In this tutorial, we showed you how to build an expandable search box in your header using HTML, CSS, and JQuery.  In the JSFiddle below, you can click on the Search icon and see how it looks before committing to its use: