Click to Reveal Search Bar with CSS

Have you tried out an expandable search box? What about click to reveal search bar? It works almost similar but with additional animation and more smooth.

Today we are going to build a reveal search bar with the help of CSS and a bit of jQuery to handle the click function only.

It’s a mobile-friendly search form that works well on mobile and tablet. It is also compatible with most browsers.

The basic idea to show a glass icon and when the user clicks on the search box will open with a nice animation. It will open on the left side of the button and will have a nice and clean border-bottom.

In open stat, the search bar will have a close (X) which allows you to close the search box. All over the interface is very neat and clean.

Furthermore, it allows you to customize its design as you want. It’s quite easy to customize. All you need to edit the CSS. You can change its background-color, border, etc to make it look more modern.

How to Create Click to Reveal Search Bar

It’s very easy to create this search box. Let’s start with the HTML structure that is simple. We will create the main wrapper then define the HTML for the header.

After that, we will define a button with an ID search-toggle.  Next, we will define another div with a class name form-search and place the label, a search icon and an input type text field.

For demo purposes, we also created additional HTML that you can use to show the search result.

<div class="search-wrapper">
  <header class="main-search clearfix">
    <button type="button" class="btn pull-right" id="search-toggle">
      <span class="fa fa-search"></i>
    </button>
    <div class="form-search stretch-to-fit">
      <label for="search" class="btn pull-left">
        <span class="btn fa fa-search"></i>
      </label>
      <div class="search-control stretch-to-fit">
        <input type="text" id="search" placeholder="Search...">
      </div>
    </div>
  </header>
  <div class="search-container">
    <div class="search-results">
      <ul>
        <li>You can show search results here.</li>
        <li>Lorem ipsum dolor sit amet, consectetur.</li>
        <li>Lorem ipsum dolor sit amet, consectetur.</li>
        <li>Lorem ipsum dolor sit amet, consectetur.</li>
      </ul>
    </div>
  </div>
</div>

The CSS

Our next part is styling. We know that without CSS, the HTML is nothing. What we do here to apply the background color to the container and design the button to make it look nice.

Next, we will style the search bar’s main area by applying some background and setting the height. We will also apply some animation so when the search bar open, it should animate.

We will apply a border-bottom with fix height but full width when it is opened. Similar we will add some of the general styles to make the search bar look better.

.search-wrapper {
  background: #e7e7e7;
}
button {
  background: none;
  border: none;
  outline: none;
}
.btn {
  background: #fff;
  line-height: 72px;
  text-align: center;
  width: 72px;
  cursor: pointer;
}
.stretch-to-fit {
  overflow: hidden;
}
.main-search {
  background: #d0cece;
  clear: both;
  height: 72px;
  z-index: 16000;
}
.main-search .form-search {
  opacity: 0;
  overflow: hidden;
  max-width: 0;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.main-search .form-search .search-control {
  padding: 0;
}
.main-search .form-search .search-control input {
  background: none;
  border: none;
  border-bottom: 2px solid #878787;
  height: 30px;
  margin: 21px 0;
  width: 100%;
}
.main-search.active {
  background: #ffffff;
}
.main-search.active .form-search {
  opacity: 1;
  max-width: 100%;
}
input {
  outline: 0;
}
.search-container {
  overflow: hidden;
  padding: 10px 0;
}
.search-container .search-results {
  height: 100%;
  overflow-y: auto;
}
.search-container .search-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-container .search-results ul li {
  border-bottom: 1px solid #ccc;
  height: 84px;
  padding: 15px;
}

The Javascript

The last step to add the Javascript. We will use it only to open the search button, nothing else. We will use the jQuery click function which will help us to open the search box.

Additionally, we will use the jQuery toggle function that will help us to make different classes active such as a search bar, a close button, and a search icon.

$( document ).ready(function() {
$('html').on('click', '#search-toggle', function() {
  $('#search').val('');
  if ($(this).find('span').hasClass('fa-search')) {
    $('#search').focus();
  }
	$('.main-search').toggleClass('active');
  $(this).find('span').toggleClass('fa-search');
  $(this).find('span').toggleClass('fa-times');
});
});

That’s it. We are done! Let’s customize it or use it.