In this code snippet, I have managed to achieve my desired outcome but it seems to only work on the first run. I am not sure why this is happening, so if anyone can help me out that would be greatly appreciated.
Here is a demo of the code in action:
HTML:
<a id="login" href="javascript:void(0);"> Login </a>
CSS:
.User-Login {
visibility:hidden;
position:absolute;
left:1150px;
top:90px;
background:black;
-webkit-transition: height 1s ease;
transition: height 1s ease;
overflow:hidden;
height:10px;
}
.box-change {
height: 250px;
}
.box-colap {
height:10px;
}
jQuery:
$(function () {
$("#login").click(function () {
var visi = $(".User-Login").css('visibility');
if (visi == "visible") {
$(".User-Login").toggleClass("box-colap");
setTimeout(function () {
$(".User-Login").css('visibility', 'hidden');
}, 2000);
} else {
$(".User-Login").css('visibility', 'visible');
$(".User-Login").toggleClass("box-change");
}
});
});