All tabs are showing, but I would like only one tab to show at any given time

Question

Could someone take a look at the javascript below?

I would like to create 3 tabs, with only one tab showing at any given time, when selected.

Right now, when testing the below code, the 3 tabs show by default under each other (as opposed to only one) and only once a tab is selected, the other tabs are hidden.

<div class="tab">

  <button class="tablinks" onclick="openCity(event, 'General')">
    <span size="4" style="font-size: small;">
      <span color="grey" style="color: grey;">
        <b>General</b>
      </span>
    </span>
  </button>

  <button class="tablinks" onclick="openCity(event, 'Product Specifications')">
    <span size="4" style="font-size: small;">
      <span color="grey" style="color: grey;">
        <b>Product Specifications</b>
      </span>
    </span>
  </button>

  <button class="tablinks" onclick="openCity(event, 'Guarantee')">
    <span size="4" style="font-size: small;">
      <span color="grey" style="color: grey;">
        <b>Guarantee</b>
      </span>
    </span>
  </button>

</div>

<div id="General" class="tabcontent">
  CONTENT
</div>

<div id="Product Specifications" class="tabcontent">
  CONTENT
</div>

<div id="Guarantee" class="tabcontent">
  CONTENT
</div>

<script>// <![CDATA[
  function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  // ]]>
</script>

Answer 1

 by default we are showing first tab, on click of the other tabs data will be shown accordingly, working demo is shown below

Could someone take a look at the javascript below? I would like to create 3 tabs, with only one tab showing at any given time, when selected. Right now, when testing the below code, the 3 tabs show by default under each other (as opposed to only one)
and only once a tab is selected, the other tabs are hidden.
<style>

</style>
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>


<div id="General" class="tabcontent">
  General CONTENT
</div>

<div id="Product Specifications" class="tabcontent">
  Product Specifications CONTENT
</div>

<div id="Guarantee" class="tabcontent">
  GuaranteeCONTENT
</div>

<script>
  // Get all elements with class="tabcontent" and hide them
  var tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 1; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // <![CDATA[
  function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    var tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
  }
  // ]]>
</script>