I am trying to use CSS to hide an element initially with display: none;, make it visible with slideDown() when a button is clicked, and then hide it again with slideUp() when the same button is clicked.
It sounds like a simple task to accomplish, but I ran into some issues. It seems that the element:hidden property remains true even after using slideDown().
Below is the CSS code:
#event-form {
height: 200px;
border: 1px dashed black;
margin-bottom: 10px;
display: none;
}
And here is the script:
$('#create-new').click(function() {
if ($('#event-form:hidden')) {
$('#event-form').slideDown();
}
else {
$('#event-form').slideUp();
}
});
Any advice on how to fix this issue would be greatly appreciated. Thank you.