Expandable Searchbar

By Christine Siu

F6
#
search form js
How do I use This?

A search bar with icon that expands on click.

HTML
<div class="input-group searchbar">
  <div class="input-group-button">
    <button class="button search"><svg width="100" height="100" viewBox="0 0 100 100">
  <path fill="#FFF" fill-rule="evenodd" d="M42.117,12.246 C50.1209,12.246 57.797,15.4257 63.453,21.0858 C69.1132,26.742 72.2928,34.4178 72.2928,42.4218 C72.2928,50.4258 69.1131,58.1018 63.453,63.7578 C57.7968,69.418 50.121,72.5976 42.117,72.5976 C34.1131,72.5976 26.437,69.4179 20.781,63.7578 C15.1208,58.1016 11.9412,50.4258 11.9412,42.4218 C11.9412,34.4178 15.1209,26.7418 20.781,21.0858 C26.4372,15.4256 34.113,12.246 42.117,12.246 L42.117,12.246 Z M76.0828827,67.3362833 C82.3527829,58.7859894 85.2617455,48.0434678 83.9173,37.22271 C82.0618,22.28871 72.3743,9.47671 58.5153,3.61771 L58.51139,3.61771 C53.32389,1.41851 47.74139,0.28961 42.10539,0.29741 L42.117,0.305 C29.058,0.30891 16.742,6.3675 8.769001,16.707 C0.7924008,27.047 -1.933999,40.5 1.382301,53.129 C4.698701,65.758 13.6833,76.137 25.7103,81.223 L25.7103,81.22691 C39.5733,87.08631 55.5113,85.10191 67.5153,76.02771 C67.5852345,75.9748392 67.6549736,75.9217748 67.724517,75.8685177 L91.555,99.6990032 L100.0003,91.253703 L76.0828827,67.3362833 Z"/>
</svg>
</button>
  </div>
  <input class="input-field search-field" type="search" placeholder="Search for anything..." />
</div>


.searchbar {
  margin: 1rem;
}

.search-field {
  width: 0;
  height: 40px;
  margin-left: 1rem;
  padding: 0;
  border-radius: 50px;
  border: none;
  transition: all 0.5s ease;
}

.expand-search {
  width: 80%;
  max-width: calc(80% - 3rem);
  border: 1px solid #c9c9c9;
  padding: .5rem;
}

svg {
  width: 20px;
  height: 20px;
}

.button {
  border-radius: 50px;
}



.searchbar {
  margin: 1rem;
}

.search-field {
  width: 0;
  height: 40px;
  margin-left: 1rem;
  padding: 0;
  border-radius: 50px;
  border: none;
  transition: all 0.5s ease;
}

.expand-search {
  width: 80%;
  max-width: calc(80% - 3rem);
  border: 1px solid #c9c9c9;
  padding: .5rem;
}

svg {
  width: 20px;
  height: 20px;
}

.button {
  border-radius: 50px;
}
JS
$(document).foundation();

$(function() {
  $('.search')
    .bind('click', function(event) {
      $(".search-field").toggleClass("expand-search");

      // if the search field is expanded, focus on it
      if ($(".search-field").hasClass("expand-search")) {
        $(".search-field").focus();
      }
    })
});

Similar Building Blocks

forms

Floating Label Form

F6
by Rafi
forms

Search and Filter Hero Section

F6
by Rafi
forms

Mobile App Message Bar

F6
by Rafi