How do I show or hide the input box (blue square) when I click the search button (red square)? Link Image
I attempted to create the transition in CSS and also experimented with JavaScript, but the JavaScript part confused me.
Here is what I tried:
$("#Hide").click(function() {
$(".buttontoggle").hide("blind");
});* {
padding: 0;
margin: 0;
}
html {
background-image: url(../Images/background.jp);
background-repeat: no-repeat;
background-attachment: fixed;
font-family: 15px/1.5 'Arial', 'Helvetica', 'sans-serif', 'Montserrat';
}
body {
height: 2000px;
}
.container {
border: 2px solid;
width: 1164px;
height: 1600px;
margin: 177px 350px 0px 371px;
overflow: hidden;
background-color: #0A081E;
}
// More CSS code...
<body>
<header>
<div class="nav-container">
<a href="Default.aspx" id="Logo">
</a>
<nav>
<ul>
<li class="buttontoggle"> <a href="#">New Release</a> </li>
<li class="buttontoggle"> <a href="#">Others</a> </li>
<li class="buttontoggle"> <a href="#">Top</a> </li>
<li class="buttontoggle"> <a href="#">Contact</a> </li>
// More HTML code...
<li><i class="fa fa-search" id="Hide"></i></li>
<div class="vl"></div>
// More HTML code...
</ul>
</nav>
</div>
</header>
<body>I have tried several different approaches and also experimented with using the webkit transition in CSS, but it did not achieve the desired effect. Here are the images of what I have tried: https://i.sstatic.net/4kMzr.png and https://i.sstatic.net/rpkK8.png
I apologize for my limited English proficiency, I hope you can still understand my message.
Edit: You can try live editing here: WebPage