How can I make the text disappear when the menu button is clicked but then come back when you exit the menu?
My efforts
$("#menuBtn").click(function() {
if ($("ul").css("display") == "none") {
$("ul").fadeIn();
} else {
$("ul").fadeOut();
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" id="menuBtn">Click</button>
<ul>
<li>Menu</li>
</ul>Your code works and do what you want, you are just missing parenthesis and curly brackets. Try copying this code:
$("#menuBtn").click(function() {
if($("ul").css("display") === "none") {
$("ul").fadeIn();
}
else {
$("ul").fadeOut();
}
})
//Fade out when the mouse leaves the menu
$("ul").mouseleave(function() {
$("ul").fadeOut();
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Menu button</button>
<ul style="display: none">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
</ul>You can set one extra class (hidden) to html element that you want to hide in order to detect if it is hidden or not. Then you can use fadeIn() and fadeOut () base on html element state.
$(document).ready(function(){
$(".btn1").click(function(){
if ($("ul").hasClass("hidden")) {
$("ul").removeClass("hidden").fadeIn();
}
else {
$("ul").addClass("hidden").fadeOut();
}
});
});