https://i.sstatic.net/oDkB9.png
I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issue where it only gets bigger and doesn't shrink back down when clicked multiple times. I have the small class defined in my CSS code. Here's the snippet of my JavaScript code:
document.addEventListener("DOMContentLoaded", () => {
let thumbnail = document.getElementById("smart_thumbnail");
thumbnail.onclick = () => {
thumbnail.className = ""
}
if (thumbnail.className == "") {
thumbnail.onclick = () => {
thumbnail.className = "small"
}
} else {
thumbnail.className = "small"
}
})