title: CSS accordion menu button
body: <p>hoping to find some help here since i'm new to webdesign.
  Just wondering why my accordion button isn't working? 
  When clicking inside the .container, it should run my animation and display my <code>&lt;ul&gt;</code>.
  Right now the animation works, but i can't seem to manipulate my CSS and change <code>display:block</code> to <code>display:none</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-css lang-css prettyprint-override"><code>.container {
    display: inline-block;
    cursor: pointer;
  }
  
  .bar1,
  .bar2,
  .bar3 {
    width: 35px;
    height: 5px;
    background-color: #000000;
    margin: 6px 0;
    transition: 0.4s;
  }
  
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    -moz-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
  }
  
  .change .bar2 {
    opacity: 0;
  }
  
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    -moz-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
  }
  
  .links {
    float: left;
    margin-left: 15%;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
    &lt;script&gt;
      function myFunction(x) {
        x.classList.toggle("change");
      }
    &lt;/script&gt;
    &lt;script&gt;
      var acc = document.getElementsByClassName("container");
      acc.onclick = function() {
        var panel = getElementsByClassName("links");
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      }
    &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container" onclick="myFunction(this)"&gt;
      &lt;ul class="links"&gt;
        &lt;li&gt;&lt;a href="#skills"&gt;&lt;span&gt;Skills&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#about"&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a href="#contact"&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="bar1"&gt;&lt;/div&gt;
      &lt;div class="bar2"&gt;&lt;/div&gt;
      &lt;div class="bar3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>