How to create a dropdown form with a transition effect that triggers on click of an element? Once triggered, the transition works smoothly but clicking again only hides the div element without triggering the transition. See the demo here:
Check out the function below:
JavaScript snippet:
<script>
$(function() {
$("#login").click(function() {
var visibility = $(".User-Login").css('visibility');
if(visibility == "visible") {
$(".User-Login").toggleClass("box-colap");
$(".User-Login").css('visibility', 'hidden');
}
else {
$(".User-Login").css('visibility', 'visible');
$(".User-Login").toggleClass("box-change");
}
});
});
HTML structure:
<table class="MainMenu" style="width:100%;background-color:white" align="center">
<a href="#">Home</a>
</td>
<td>
<a href="#">How It Works </a>
</td>
<td>
<a href="#"> Features</a>
</td>
<td>
<a href="#"> Why Us </a>
</td>
<td>
<a href="#"> Sign Up </a>
</td>
<td>
<a id="login" href="javascript:void(0);"> Login </a>
</td>
</table>
CSS styles:
.User-Login {
visibility: hidden;
position: absolute;
left: 1150px;
background: black;
-webkit-transition: height 2s ease;
-moz-transition: height 2s ease;
-o-transition: height 2s ease;
-ms-transition: height 2s ease;
transition: height 2s ease;
overflow: hidden;
height: 10px;
top: 90px;
}
.box-change {
height: 250px;
}
.box-colap {
height: 10px;
}