JSFiddle - React, Tailwind, and code Playground

by damithruwan1234

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <h2>Vertical (basic) form</h2>
  <div class="col-sm-8 col-sm-offset-2" id="search_panel">
  <form method="get">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="text" class="form-control" id="email" value="dfdf" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="text" class="form-control" id="pwd" value="ssds" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <input type="submit" class="btn btn-info" value="SEARCH">
  </form>
  </div>
</div>

<div class="col-sm-8 col-sm-offset-2">
 <a href="#" id="hide_search">
 <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa fa-angle-up fa-stack-1x fa-inverse"></i>
</span>
</a>

 <a href="#" id="show_search" style="display: none;">
 <span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa fa-angle-down fa-stack-1x fa-inverse"></i>
</span>
</a>
 </div>

JavaScript

$(document).ready(function(){
    
$("#hide_search").click(function(){
  $("#search_panel").hide(1000);
	$("#show_search").show();
	$("#hide_search").hide();
});

$("#show_search").click(function(){
  $("#search_panel").show(1000);
	$("#show_search").hide();
	$("#hide_search").show();
});
});