title: element.classList.toggle() is not working
body: <p>I have been trying to make my form show and hide when I click on a button but it is not working. I want to use vanilla javascript and have been trying to make it work with .classList.toggle() but it is working. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;i id="search-button"class="fa fa-laptop fa-2x"&gt;&lt;/i&gt;
  &lt;form id="search-form"&gt;
       &lt;input
         id="search-input"
         type="text" 
         name="search" 
         placeholder="Search.." &gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#search-input{
    display: none;
  }
  .show{
    display: block;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>const searchButton = document.querySelector("#search-button");
  const searchInput = document.querySelector("#search-input");
  
  searchButton.addEventListener("click", () =&gt; {
    searchInput.classList.toggle("show");
  })
  </code></pre>
  
  <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>const searchButton = document.querySelector("#search-button");
  const searchInput = document.querySelector("#search-input");
  
  searchButton.addEventListener("click", () =&gt; {
    searchInput.classList.toggle("show");
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#search-input {
    display: none;
  }
  
  .show {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="search-button" class="fa fa-laptop fa-2x"&gt;click me&lt;/button&gt;
  &lt;form id="search-form"&gt;
       &lt;input
         id="search-input"
         type="text" 
         name="search" 
         placeholder="Search.." &gt; 
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>