title: How do I change multiple elements with same class name using Javascript?
body: <p>Follow up to <a href="https://stackoverflow.com/q/42389937/2803565">my previous question</a> - I want to use a button to show / hide multiple elements with the same class name using JS, yet it appears that I can only change the first element with a certain class name, and all further elements with the same class on the page are ignored. </p>
  
  <p>How do I fix this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function designInfo() {
    document.getElementsByClassName("design")[0].style.display = "block";
    document.getElementsByClassName("it")[0].style.display = "none";
    document.getElementsByClassName("other")[0].style.display = "none";
   }
  
   function itInfo() {
    document.getElementsByClassName("design")[0].style.display = "none";
    document.getElementsByClassName("it")[0].style.display = "block";
    document.getElementsByClassName("other")[0].style.display = "none";
   }
   
   function allInfo() {
    document.getElementsByClassName("design")[0].style.display = "block";
    document.getElementsByClassName("it")[0].style.display = "block";
    document.getElementsByClassName("other")[0].style.display = "block";
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .it {}
      .design {}
      .other {}
  
      .indent {
        margin: .5em 1em .5em 1em;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;button onclick="designInfo()"&gt;show design stuff&lt;/button&gt;
      &lt;button onclick="itInfo()"&gt;show IT stuff&lt;/button&gt;
      &lt;button onclick="allInfo()"&gt;show all&lt;/button&gt;
  
      &lt;div class="indent"&gt;
  
         &lt;div class="it"&gt;• boring IT stuff&lt;/div&gt;
         &lt;div class="design"&gt;• cool design stuff&lt;/div&gt;
         &lt;div class="it"&gt;• it stuff and things&lt;/div&gt;
         &lt;div class="design"&gt;• design stuff&lt;/div&gt;
         &lt;div class="it"&gt;• it stuff and more&lt;/div&gt;
         &lt;div class="other"&gt;• more it stuff&lt;/div&gt;
         &lt;div class="other"&gt;• it stuff&lt;/div&gt;
    
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>