Quiero un botón para mostrar algo de texto cuando se hace clic. el botón cambia de color cuando paso el mouse sobre él, pero no muestra texto cuando se hace clic aquí es css y javascript.
CSS:
button { background-color: #f2c33c; font-size: 20px; color: #000000; padding: 10px; border-radius: 10px; border: 3px solid #808080 } button:hover { background-color: #7cc272; color: #333333; } .hidden { display: none; } .showing { display: block; font-family: Arial, sans-serif; background-color: #509fcb; color: #000000; width: 400px; padding: 20px; margin-top: 20px; border-radius: 20px; }js:
document.querySelector(".clickme").addEventListener("click", () => { document.querySelectorAll(".hidden").forEach((item) => { item.classList.toggle(".showing"); }); });No es necesario especificar el . en la clase que su toggeling.
Así que tu código se vería así:
document.querySelector(".clickme").addEventListener("click", () => { document.querySelectorAll(".hidden").forEach((item) => { item.classList.toggle("showing"); }); });