title: It doesn't work on the first click, but does on the second one. How to fix that?
body: <p>So I have function like this, it doesn't work on the first click, but does on the second one. How to fix that?</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>let coll = document.getElementsByClassName('collection');
  let dis = document.getElementsByClassName('display');
  
  document.getElementById("menu-btn1").addEventListener("click", function() {
    if(coll[0].style.display == 'none') 
    {
      coll[0].style.display = 'block';
      dis[0].style.display = 'none';
    }
    else 
    {
      coll[0].style.display = 'none';
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.collection {
      width: 80vh;
      height: 85vh;
      background-color: blue;
  
      display: none;
      grid-column: 4 / 10;
      grid-row: 2 / 9;
      justify-self: center;
      z-index: 3;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="collection"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>(and yes - I was looking for case like that before, but most of it is jQuery, and I don't get it, please help)</p>