Toggle Drop Down Search Box using Jquery

A quick tip on how to create a search box which opens on click or hover.

Check out the youtube video on Toggle Drop Down Search Box using Jquery

Steps :

  1. Create a search button with an Icon(Font awesome icons)

  2. Create a search box using input fields and position it below the search Icon using absolute position.

  3. Create a small arrow using :before pseudo-element.

    .search-box:before{
  content: "";
  position: absolute;
  top: -32px;
  right: 13px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 14px solid transparent;
  border-bottom: 14px solid #D80B15;
}

    Read more about :before pseudo element here

  4. Hide search box using display : none

  5. Show search box on click event using Jquery toggle() method and Toggle display based on its current status

Here’s some sample code using Jquery. The same can be achieved using pure Javascript with 2 extra lines of code.

The same effect but on hover can be achieved using pure css by setting display:block on :hover of search button.

[codepen_embed height=“265” theme_id=“0” slug_hash=“PJdMrE” default_tab=“result” user=“cool_lazyboy”]See the Pen Toggle Drop Down Search Box Using Jquery by rajeshdn (@cool_lazyboy) on CodePen.[/codepen_embed]

[mc4wp_form id=“177”]