title: onclick show all hidden elements
body: <p>On click of the different letters the following code is showing the corresponding elements. But I'm struggling to to show all elements when someone clicks "All".</p>
  
  <p>How could I achieve this?</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>function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    if (evt) {
      evt.currentTarget.className += " active"
    } 
  }
     </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a class="tablinks" onclick="openCity(event, 'All')"&gt;All&lt;/a&gt;
  &lt;a class="tablinks" onclick="openCity(event, 'A')"&gt;A&lt;/a&gt;
  &lt;a class="tablinks" onclick="openCity(event, 'B')"&gt;B&lt;/a&gt;
  &lt;a class="tablinks" onclick="openCity(event, 'C')"&gt;C&lt;/a&gt; &amp;nbsp;
  &lt;div id="A" class="tabcontent"&gt;
    &lt;h3&gt;A&lt;/h3&gt;
    &lt;a href=""&gt;Abschreibung&lt;/a&gt;
  &lt;/div&gt;
  &amp;nbsp;
  &lt;div id="B" class="tabcontent"&gt;
    &lt;h3&gt;B&lt;/h3&gt;
    &lt;a href=""&gt;Bauvorhaben&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="C" class="tabcontent"&gt;
    &lt;h3&gt;C&lt;/h3&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>