Jquery Expandable Search Box on Click

An expandable search box shows the input type search form when clicking on the button. It builds with jquery and a bit of CSS to style it. It is fluid width and works well on all type of media, small and large devices.

You can easily implement in any kind of design. It is an animated search box which deconstructed with jquery. initially, it will show only a button with the search icon. When you click on that icon button, it will slide out the search field.

How to Make Expandable Search Box

To get started, first you need to add the stylesheets and Javascript files in the header.

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>
<script src="js/uisearch.js"></script>

Make sure to Initialize the search by ID

<script>
      new UISearch( document.getElementById( 'sb-search' ) );
</script>

Create the HTML by defining the main container and add the input form.

<div id="sb-search" class="sb-search">
    <form>
        <input class="sb-search-input" placeholder="Enter your search term..." type="search" name="search" id="search">
        <input class="sb-search-submit" type="submit" value="">
        <span class="sb-icon-search"></span>
    </form>
</div>

That’s It! Now the cool loading search form is ready to enhance the beauty of your website.