title: How do I change the display of a class using JavaScript?
body: <p>So I have this code:</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 show_all()
      {
       document.getElementByClassName('login').style.display = 'inline';
       document.getElementById('button-hide').style.display = 'inline';
       document.getElementById('button-show').style.display = 'none';
      };
      function hide_all()
      {
       document.getElementByClassName('login').style.display = 'none';
       document.getElementById('button-hide').style.display = 'none';
       document.getElementById('button-show').style.display = 'inline';
      };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;nav&gt;
       &lt;input type="button" value="Show login Buttons" id="button-show" onclick="show_all();"/&gt;
       &lt;input type="button" value="Hide login Buttons" id="button-hide" onclick="hide_all();"/&gt;
      &lt;/nav&gt;
          &lt;p class="login"&gt;Username:&lt;/p&gt;
          &lt;img src="un.png" class="login"/&gt;
          &lt;p class="login"&gt;Password:&lt;/p&gt;
      &lt;p&gt;Something not ment to be hidden.&lt;/p&gt;
          &lt;img src="pass.png" class="login"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And I need the entire class to be shown/hidden;
  I have about 50 blocks with elements with the class "login" and I would like to use only JavaScript to display it.</p>