Toggle Drop Down Search Box using Jquery

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

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.

See the Pen Toggle Drop Down Search Box Using Jquery by rajeshdn (@cool_lazyboy) on CodePen.0

Author: Ranjith kumar

A CA student by education, self taught coder by passion, loves to explore new technologies and believes in learn by doing.

Leave a Reply

Your email address will not be published. Required fields are marked *