title: Show more/Show less Toggle Button for Multiple Elements with Pure JavaScript [No jQuery]
body: <p>I am trying to create a small script which shows different hidden <code>HTML</code> items after clicking on a button or link.</p>
  
  <p><strong>Requirements:</strong></p>
  
  <ul>
  <li>Change button text: Toggle button text from <strong>Show more items</strong> to <strong>Hide items</strong> after clicking the button. (And vice versa)</li>
  <li>Multiple collapse: Script must make multiple elements visible</li>
  <li>Nice to have: <code>display: none</code> not hardcoded into source code but located in the stylesheet<code>&lt;style&gt;display: none;&lt;/style&gt;</code></li>
  <li>No jQuery or frameworks - Pure minimal lightweight JavaScript</li>
  </ul>
  
  <p><strong>Script base:</strong></p>
  
  <p>I used <a href="https://www.penwatch.net/cms/js_show_hide/" rel="nofollow noreferrer">this Pure Javascript Show/Hide Toggle script</a> as base and modified it.</p>
  
  <p><strong>My modified Code Snippet:</strong></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>var button = document.querySelector('.toggle-button');
  var menu = document.querySelector('.item');
  button.addEventListener('click', function (event) {
    if (menu.style.display == "") {
        menu.style.display = "none";
        button.innerHTML = "Show more items";
    } else {
        menu.style.display = "";
        button.innerHTML = "Hide items";
    }
  }
    );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="item"&gt;Item 1&lt;/div&gt;
  &lt;div class="item"&gt;Item 2&lt;/div&gt;
  &lt;div class="item hidden-item" style="display: none;"&gt;Item 3&lt;/div&gt;
  &lt;div class="item hidden-item" style="display: none;"&gt;Item 4&lt;/div&gt;
  &lt;div class="item hidden-item" style="display: none;"&gt;Item 5&lt;/div&gt;
  &lt;button class="toggle-button"&gt;Show more items&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Codepen:</strong></p>
  
  <p><a href="https://codepen.io/anon/pen/ePxeVE" rel="nofollow noreferrer">https://codepen.io/anon/pen/ePxeVE</a></p>
  
  <p><strong>Problem:</strong></p>
  
  <p>My modification does not show the hidden items. I already spent some hours on the issue but I don't get the script working. Any ideas from a JavaScript pro how to show and hide multiple elements when clicking the toggle button?</p>