Me pregunto si hay alguna forma de que el mismo botón haga que aparezca un div si hago clic en él una vez y desaparece si hago clic en él otra vez Código JS:
const button = document.getElementById("menu"); const menu = document.querySelector(".box"); button.addEventListener("click", function () { menu.style.display = "block"; });Código HTML:
<button id="menu">click me for menu!</button> <div class="box"></box>Código CSS:
.box{ height: 200px; width: 200px; display: none; }Usé este método antes, pero no sé si hay una manera de usarlo directamente.
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; } }EDITAR Quiero que esté oculto de forma predeterminada y que solo aparezca cuando haga clic en el botón y se vuelva a ocultar cuando haga clic en el mismo botón
Puede usar classList.toggle para alternar la clase hidden a su div con cada clic
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>