I'm creating a website and i'm trying to make a button that will toggle the visibility of a div element. it works for me right now but I want to add an animation to it and I just can't pull it off.
I tried changing the "block"
to fadeIn()
and the "none"
to fadeOut()
but that didn't work.
Any ideas?
function pcsh1() {
var x = document.getElementById("pc1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<button onclick="pcsh1()">Show / Hide PC 1</button>
<div id="pc1">
<textarea rows="2" cols="20" placeholder="PC Name" class="pcbox">PC Name: </textarea>
<textarea rows="2" cols="20" placeholder="Alignment" class="pcbox">Alignment: </textarea>
<textarea rows="2" cols="20" placeholder="Max HP" class="pcbox">Max HP: </textarea>
<textarea rows="2" cols="20" placeholder="Current HP" class="pcbox">Current HP: </textarea>
</div>
The output currently is great but I would prefer it to have an animation.
fadeIn()
andfadeOut()
are jQuery functions. Are you using jQuery?fadeIn()
andfadeOut()
?