Search bar Hide and Show when click

		<!-- Search Bar start -->
		<div class="search_area" style="background-color:#FCF8E3;">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="serch_form">
							<div class="form-group has-success has-feedback">
							  <label class="control-label" for="inputGroupSuccess1">Search What you are looking for....</label>
							  <div class="input-group">

								<input style="height:50px" type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status" placeholder="Search........">
								<span class="input-group-addon search-areaser"><span class="fa fa-search" ></span></span>
							  </div>

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Search bar End -->


/*******************************hide and show button***************************************************************/

			<div id="search-button" style="margin-top:35px;">
					<ul style="margin-top">
								<li class="search-form" style="border: 1px dashed #fff;
								color: #fff;
								cursor: pointer;
								display: list-item;
								float: right;
								list-style: outside none none;
								margin-right: 50px;
								padding: 14px 20px;"><span class="fa fa-search"></span></li>

								<li id="search-form" style="padding:14px 20px;color:#fff;cursor:pointer;border:1px dashed #fff;float: right;
								list-style: outside none none;
								margin-right: 50px;"><span class="fa fa-times"></span></li>
					</ul>
					</div>


/***********************************show the below code in footer***************************************************************/

<script>
							$(document).ready(function(){
								$(".search-form").click(function(){
									$(".search_area").show(1);
									$(".search-form").hide(1);
									$("#search-form").show(1);
								});
								$("#search-form").click(function(){
									$(".search_area").hide(1);
									$(".search-form").show(1);
									$("#search-form").hide(1);
								});
							});
							</script>
							<style type="text/css">
							.search_area{display:none;}
							#search-form {
							  display: none;
							  float: right;
							  margin-bottom: 0;
							  margin-right: 116px;
							  overflow: hidden;
							}
							.input-group-addon.search-areaser{padding:0 25px}

							</style>