Create Toggleable Tabs In HTML

<!-- Tab links -->

<div class="tab">

  <button class="tablinks" onclick="openTabs(event, 'Phần 1')" id="defaultOpen">Phần 1</button>

  <button class="tablinks" onclick="openTabs(event, 'Phần 2')">Phần 2</button>

  <button class="tablinks" onclick="openTabs(event, 'Phần 3')">Phần 3</button>

  <button class="tablinks" onclick="openTabs(event, 'Phần 4')">Phần 4</button>

  <button class="tablinks" onclick="openTabs(event, 'Phần 5')">Phần 5</button>

  <button class="tablinks" onclick="openTabs(event, 'Phần 6')">Phần 6</button>

</div>

<!-- Tab content -->

<div id="Phần 1" class="tabcontent">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>

<div id="Phần 2" class="tabcontent">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p>

</div>

<div id="Phần 3" class="tabcontent">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

<div id="Phần 4" class="tabcontent">

  <h3>London</h3>

  <p>London is the capital city of England.</p>

</div>

<div id="Phần 5" class="tabcontent">

  <h3>Paris</h3>

  <p>Paris is the capital of France.</p>

</div>

<div id="Phần 6" class="tabcontent">

  <h3>Tokyo</h3>

  <p>Tokyo is the capital of Japan.</p>

</div>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

 

/* Style the tab */

.tab {

  overflow: hidden;

  border: 1px solid #ccc;

  background-color: #f1f1f1;

}

/* Style the buttons inside the tab */

.tab button {

  background-color: inherit;

  float: left;

  border: none;

  outline: none;

  cursor: pointer;

  padding: 14px 16px;

  transition: 0.3s;

  font-size: 17px;

}

/* Change background color of buttons on hover */

.tab button:hover {

  background-color: #ddd;

}

/* Create an active/current tablink class */

.tab button.active {

  background-color: #ccc;

}

/* Style the tab content */

.tabcontent {

  display: none;

  padding: 6px 12px;

  border: 1px solid #ccc;

  border-top: none;

}

</style> 

<script>

function openTabs(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";

  evt.currentTarget.className += " active";

}

</script>

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.