October 17, 2021

Search box on click

<div class="container bg-light"> 
            <div id="search-box" class="mt-5 text-right"><i class="fa fa-search"></i></div> 
    </div>
    <div class="container">
        <div class="slideSerach pull-right">
        <form action="">
           <div class="placeholder"><i class="fa fa-search"></i></div>
            <input type="text" name="" id="" placeholder="Search here...">
             
        </form>
    </div>
    </div>

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
   <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap" rel="stylesheet">
  <style>
      body { font-family: 'Poppins', sans-serif; }
      #search-box { cursor: pointer; font-size: 1.5em; padding: 20px 0px;} 
      .slideSerach { display: none;}
      .slideSerach {background: #673ab7;padding: 25px;position: relative;}
      .fullScreen form { margin: auto; display:  flex;  align-items: center; min-height: 100vh; max-width: 550px; width: 100%; position: relative;}
      .slideSerach input[type="text"] {  border: none; border-radius: 5px; height: 50px; line-height: 50px; margin: auto; width: 100%; padding: 15px 20px; box-sizing: border-box;}
      .slideSerach input[type="text"]:focus { outline: none; border: none; box-shadow: none; }
      .slideSerach .close {position: relative;z-index: 99;text-shadow: none;color: #f00;right: 30px;opacity: 1;font-weight: 400; cursor: pointer;}
      .pla

 

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
        $(document).ready(function(){
            $('#search-box').click(function(){
                $('.slideSerach').slideToggle('d-block');
            });
             
        })
    </script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *