title: How to get an element to hide/unhide through DOM without using ID?
body: <pre><code>  var onoffbutton = document.getElementById("onoffInput");
    onoffbutton.addEventListener('click', function(event) {
      if(document.getElementById("demoE").innerHTML==="first"){
      document.getElementById("demoE").innerHTML ="second";
      document.getElementsByClassName('animation').hidden = false;
      return;
      }
      if(document.getElementById("demoE").innerHTML==="second"){
      document.getElementById("demoE").innerHTML ="first";
      document.getElementsByClassName('animation').hidden = true;
      return;
      }
      } , false)
  </code></pre>
  
  <p>When I use <code>document.getElementsByClassName('animation').hidden = false;</code> it doesn't work, but when I use <code>document.getElementById('animation').hidden = false</code> it helps me unhide an image.  The problem is that I have an image that already has an ID attached to it.  </p>
  
  <p><code>&lt;img class="animation" src="gifs/right.gif" hidden&gt;</code> vs. <code>&lt;img class="animation" id="original-pick" hidden&gt;</code>  Notice I have two selectors attached to the second element.  Thanks!</p>