Search code examples
javascripthtmlcssthumbnailsimage-resizing

Make thumbnail big and small with onclick event


enter image description here

I've trying for a couple hours to make the thumbnail (image in my html) big when clicking it and small when clicking it again but it only gets bigger, and not smaller when clicking it for another time; the small class is in my css code, Here's my 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"

    }

})

Solution

  • document.addEventListener("DOMContentLoaded", () => {
        const thumbnail = document.getElementById("smart_thumbnail");
    
        thumbnail.onclick = () => {
            thumbnail.classList.toggle('small');
        }
    });