How do I create this search box animation? - html

Question

I am currently trying to replicate a website for practice, but have came to a halt due to a search box that I don't know how to create.
Now, I know how to create a normal search box, with the form and input method, however this specific search box has a slight animation.
I'll explain.
Search Box
Ok, so the search box only appears once you click the magnifying glass. Once you do this, the search box will sort of slide out from the left hand side of the magnifying glass.
How do I go about hiding the search box and only making it visible after being clicked on? And how do I make it "slide out" ?

Answer 1

My solution:
Use the following JavaScript code for appearing:
var button = document.getElementById("search");
var input = document.getElementById("search_input");
document.body.removeChild(input);
var permission = true;
button.addEventListener("click", appear);
function appear() {
if (permission == true) {
if(document.getElementById("search_input") == null || window.getComputedStyle(document.getElementById("search_input")).getPropertyValue("opacity") == 0) {
input.setAttribute("class", "static");
document.body.appendChild(input);
} else {
sliding();
}
}
}
function sliding() {
permission = false;
input.setAttribute("class", "sliding");
document.body.removeChild(input);
document.body.appendChild(input);
window.setTimeout(remove, 2900);
}
function remove() {
document.body.removeChild(input);
permission = true;
}
You only have to add "search" as id in the button tag or in the img tag and "search_input" as id in the input tag. And for sliding out you could use this CSS animation:
#keyframes slide {
from { left: 10%; opacity: 1;}
to { left: 90%; opacity: 0;}
}
#-webkit-keyframes slide {
from { left: 10%; opacity: 1;}
to { left: 90%; opacity: 0;}
}
#search_input {
position: absolute;
left: 10%;
}
.sliding {
animation-name: slide;
animation-duration: 3s;
-webkit-animation-name: slide;
-webkit-animation-duration: 3s;
}

Answer 2

Here's a simply jQuery solution.
$(document).ready(function() {
$('#trigger').click(function() {
$('#search-bar').toggleClass('search-bar-expanded');
});
});
#search-bar {
width: 0;
overflow: hidden;
display: inline-block;
transition:width 1s;
}
.search-bar-expanded {
width: 200px!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="search">
<button><i class="fa fa-search" id="trigger"></i></button>
<div id="search-bar">
<input type="text"/>
</div>
</div>