onclick show all hidden elements

Question

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".

How could I achieve this?

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  if (evt) {
    evt.currentTarget.className += " active"
  } 
}
   

<a class="tablinks" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>

Answer 1

document.getElementById(cityName).style.display = "block";

So the problem is this line errors out when the "cityName" argument is "All". So you just need to handle that scenario, and whenever you get "All" in that variable you can instead display all elements.

I have fixed the code in snippet below:

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  if (cityName != 'All') {
    document.getElementById(cityName).style.display = "block";
  } else {
    // Display all
    var elements = document.querySelectorAll(".tabcontent");
    for (var i = 0; i < elements.length; i++) {
      elements[i].style.display = "block";
    }
  }

  if (evt) {
    evt.currentTarget.className += " active"
  } else {
    document.getElementById("defaultOpen").className += " active"
  }
}

<a class="tablinks" id="defaultOpen" onclick="openCity(event, 'All')">All</a>
<a class="tablinks" onclick="openCity(event, 'A')">A</a>
<a class="tablinks" onclick="openCity(event, 'B')">B</a>
<a class="tablinks" onclick="openCity(event, 'C')">C</a> &nbsp;
<div id="A" class="tabcontent">
  <h3>A</h3>
  <a href="">Abschreibung</a>
</div>
&nbsp;
<div id="B" class="tabcontent">
  <h3>B</h3>
  <a href="">Bauvorhaben</a>
</div>
<div id="C" class="tabcontent">
  <h3>C</h3>
</div>