title: Making <div>s disappear simultaneously
body: <p>My aim of the code which you'll find below is to make some kind of a filter. But for some reason it won't work.</p>
  
  <p>As you can see when you try to hide the boxes when selecting the <code>input</code> box it won't work; but when you make <code>var x</code>, <code>var x = document.getElementById("a");</code> it will work. Is there a way to hide all the different boxes?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction1() {
    var x = [document.getElementById("a"), document.getElementById("b"), document.getElementById("c")];
  
    if (x.style.display == 'block')
      x.style.display = 'none';
    else
      x.style.display = 'block';
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#a, #b, #c {
    float: left;
    width: 25%;
    height: 200px;
    background-color: #ffffff;
    border: 1px solid #002261;
    margin: -1px;
    text-align: center;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" onclick="myFunction1()"&gt;Try to hide all
  
  
  &lt;div id="a"&gt;item a&lt;/div&gt;
  &lt;div id="b"&gt;item b&lt;/div&gt;
  &lt;div id="c"&gt;item c&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see you can't hide all the boxes simultaneously.</p>