I want a button to display some text when clicked. the button is changing color when i hover over it but its not displaying text when clicked here tis the css and 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");
});
});
You dont need to specify the . on the class that your toggeling.
So your code would look like this:
document.querySelector(".clickme").addEventListener("click", () => {
document.querySelectorAll(".hidden").forEach((item) => {
item.classList.toggle("showing");
});
});