JS: Click to enlarge image, then click again to make it go back to previous size

I want to be able to click on an image, have it become big, and then when I click it again, make it go back to being small. I'm trying to use an if/else statement to solve this problem, but I still can't figure it out. This is the JS I have so far:

document.addEventListener("DOMContentLoaded", function(event) {
 var thumbnailElement = document.getElementById("smart_thumbnail");

 if (thumbnailElement.className === "small") {
    thumbnailElement.addEventListener("click", function() {
     thumbnailElement.className = "";
    });
 } else {
    thumbnailElement.addEventListener("click", function() {
     thumbnailElement.className = "small";
    });
 }
});

And the HTML for the image:

<img class="small" id="smart_thumbnail" src="http://ift.tt/2mMstxS\
3gloQ/ULd1wyJb1oI/AAAAAAAAEIg/LE1Kakhve9Y/s1600/Hieroglyphs_Ani-papyrus.jpg">

I'm simply wanting to get rid of the "small" class on the id "smart_thumbnail" to make it big and put the "small" class back to make it small again, but I can only make it big. When I click on it the 2nd time, it doesn't do anything. I've tried an if/else if statement and that didn't work. I looked on here for the same question, but could only find stuff about jQuery. Trying to solve this with JavaScript only.

Any help greatly appreciated. Thanks!