I wonder if there is a way for the same button to make a div appear if I click on it once and disappear if I click on it another time JS code:
const button = document.getElementById("menu");
const menu = document.querySelector(".box");
button.addEventListener("click", function () {
menu.style.display = "block";
});
HTML code:
<button id="menu">click me for menu!</button>
<div class="box"></box>
CSS code:
.box{
height: 200px;
width: 200px;
display: none;
}
I used this method before but I don't know if there is a way to use it directly
let clicks = 0;
button.addEventListener("click", function () {
checkclicks();
if (clicked === true) menu.style.display = "block";
if (clicked === false) menu.style.display = "none";
});
function checkclicks() {
clicks += 1;
if (clicks % 2 === 1) {
//on
clicked = true;
}
if (clicks % 2 === 0) {
//off
clicked = false;
}
}
EDIT I want it to be hidden by default and only appearing when I click on the button and gets hidden again when I click on the same button
You can use classList.toggle to toggle hidden class to your div with each click
var mydiv = document.querySelector("#mydiv")
var mybtn = document.querySelector("#mybtn")
mybtn.addEventListener("click", function () {
mydiv.classList.toggle("hidden")
});.hidden{
display:none;
}
#mydiv{
height:50px;
width:50px;
color:white;
background-color:blue;
padding:10px;
}<div id="mydiv" class="hidden">test</div>
<button id="mybtn">Click Me!</button>