Create search button like twentyfourteen theme

Question

I need to create a search button like the one in the theme twentyfourteen. How can I do?

Answer 1

See how simple jquery commands and use of css can help:

When the user clicks on the search button, it displays the search form..

See an example in practice:

$( "#btn-search" ).click(function() {
  $("#search-wrapper").toggle();
  $("#search-wrapper").addClass("active");
});

.principal{
  width: 200px;
  }

#search-wrapper{
  display: none;
  text-align: right;
  width: 100%;
  }

#txt-search{
  border: none;
  margin:5px 3px;
  width: 30%;

}
.active{
  background-color: green;
  color: white;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="principal">
<nav class="text-right">
	<a>home </a> | 
	<a id="btn-search"><i class="glyphicon glyphicon-search"></i> search</a>
</nav>
<div id="search-wrapper">
	<form>
		search here: <input type="search" id="txt-search" name="txt-search">

	</form>
</div>
</div>

You saw that by default, the search form container was declared in css with display: None, soon it will only appear, if, the user clicks on the button, so the function toggle() alternate from show or Hide as the user clicks..

I hope I’ve helped :)