title: Closing dropdown button in Vanilla JS
body: <p>How do I close the dropdown button in Vanilla JS? I currently have a method to open the dropdown button but no way in which the close the button. I would like to keep the for loop in place but am unsure as to how to achieve the close. What is the proper way to handle the problem? Help would be appreciated.
  HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
      &lt;script
    src=&quot;https://code.jquery.com/jquery-3.6.0.js&quot;
    integrity=&quot;sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=&quot;
    crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://kit.fontawesome.com/36947df53d.js&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class=&quot;logo&quot;&gt;
      &lt;p id=&quot;logo&quot;&gt;Logo&lt;/p&gt;
      &lt;button id=&quot;btn&quot;&gt;&lt;i class=&quot;fa-solid fa-bars fa-2xl&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
     &lt;nav class =&quot;&quot;&gt;
       &lt;ul class =&quot;&quot;&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;Link 2&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;link&quot;&gt;Link 3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/nav&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>let btnn = document.getElementById(&quot;btn&quot;);
  btnn.addEventListener(&quot;click&quot;, changeBtn);
  
  function changeBtn() { 
      let links = document.getElementsByClassName('link');
      for (let i = 0; i &lt; links.length; i++) {
          document.getElementsByClassName('link')[i].style.display = &quot;block&quot;;
      } 
  }
  </code></pre>
  <p>CSS</p>
  <pre><code>
  body {
      height: 100vh;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  .logo {
      display: block;
      text-align: left;
      background: red;
      height: 10vh;
  }
  
  .logo #logo {
      display: inline;
      line-height: 10vh;
      font-size: 3em;
      margin-left: 0.8em;
      
  }
  
  button#btn {
      display: inline;
      float: right;
      margin-right: 2em;
      line-height: 10vh;
      margin-top: 0;
      margin-bottom: 0;
      border: none;
      background-color: red;
      padding: 0;
  }
  
  nav {
      display: block;
      background-color: black;
      width: 100vw;
  }
  
  nav ul {
      display: block;
      list-style-type: none;
      margin: 0;
      padding-left: 0;
  }
  
  nav ul li {
      text-align: center; 
  }
  
  .link {
      display: none;
      color: white;
      font-size: 2.4em;
      background-color: blue;
      text-decoration: none;
      width: 100vw;
      height: 7vh;
      line-height: 7vh;
      border-bottom: 2px solid black;
      text-align: center;
  }
  </code></pre>