Make thumbnail big and small with onclick event

October 12, 2022

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');
    }
});