Toggle tables using Buttons

Question

So currently I have made 2 tables with information in them. But I want to make it so when users open the html document it only shows you 1 table and you can toggle between the different tables. When I click the button for table 1 it hides table 2 and when I click button for table 2 it hides table 1.

function myFunction() {
  var x = document.getElementById("Tables");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myFunction1() {
  var x = document.getElementById("Tables1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}

#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="myFunction()">Click!</button> <button onclick="myFunction1()">Click!</button>

<div id="Tables">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div id="Tables1">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

Umair Shah Yousafzai · Accepted Answer

Here you go. It's very easy and very clean way to do it so.

NOTE: It's a generic function which can be used for lots of things to toggle between two things.

function toggleElements(showElement, hideElement) {
  document.getElementById(showElement).style.display = "block";
  document.getElementById(hideElement).style.display = "none";
}

#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}
#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="toggleElements('Tables', 'Tables1')">Click</button> 
<button onclick="toggleElements('Tables1', 'Tables')">Click</button>

<div id="Tables">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div id="Tables1" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

For multiple tables toggling use the following code:

function toggleElements(showElement, hideElements) {
  document.querySelectorAll(hideElements).forEach(el => el.style.display = "none");
  document.querySelector(showElement).style.display = "block";
}

.table {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  margin-top: 20px;
}

.table1 {
    background-color: blue;
}

.table2 {
  background-color: Purple;
}

.table3 {
  background-color: green;
}

.table4 {
  background-color: violet;
}

.table5 {
  background-color: pink;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="toggleElements('.table1', '.table')">Table 1</button> 
<button onclick="toggleElements('.table2', '.table')">Table 2</button>
<button onclick="toggleElements('.table3', '.table')">Table 3</button>
<button onclick="toggleElements('.table4', '.table')">Table 4</button>
<button onclick="toggleElements('.table5', '.table')">Table 5</button>

<div class="table table1">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table2" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table3" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table4" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div class="table table5" style="display: none">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

Nidhin Joseph · Answer

Try this.

var table = document.getElementById("Tables");
var table1 = document.getElementById("Tables1");

function hidetable(id) {
  table.style.display = (id == "Tables") ? "block" : 'none';
  table1.style.display = (id == "Tables") ? "none" : 'block';
}

#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}

#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<button onclick="hidetable('Tables')">Tables!</button>

<button onclick="hidetable('Tables1')">Tables1!</button>

<div id="Tables">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

<div id="Tables1" style="display:none;">
  <table>
    <tr>
      <th>Cost</th>
      <th>Name</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Price</td>
      <td>Names</td>
      <td>Place</td>
    </tr>
  </table>
</div>

david oyinbo · Answer

Use a single select. And give the tables you want to be hidden the attribute hidden And use the javascript as given below


 function myFunction() {
      var tables = document.getElementsByClassName("toggletable");
      var targetval = document.getElementById("select").value;
      for(var i = 0; i < tables.length; i++){
        if(targetval == i + 1){
            tables[i].removeAttribute("hidden");
        }else{
            tables[i].setAttribute("hidden", true);
        }
      }
    }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#Tables {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: blue;
  margin-top: 20px;
}
#Tables1 {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: Purple;
  margin-top: 20px;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>
<select id="select" onchange="myFunction()">
    <option value="1" >Table 1</option>
    <option value="2">Table 2</option>
    <option value="3">Table 3</option>
    <option value="4">Table 4</option>
    <option value="5">Table 5</option>
</select>


<div id="Tables" class="toggletable">
<table>
  <tr>
    <th>Cost</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Price1</td>
    <td>Names1</td>
    <td>Place1</td>
  </tr>
</table>
</div>

<div id="Tables1" class="toggletable" hidden>
<table>
  <tr>
    <th>Cost</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Price2</td>
    <td>Names2</td>
    <td>Place2</td>
  </tr>
</table>
</div>

<div class="toggletable" hidden>
<table>
  <tr>
    <th>Cost</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Price3</td>
    <td>Names3</td>
    <td>Place3</td>
  </tr>
</table>
</div>

<div class="toggletable" hidden>
<table>
  <tr>
    <th>Cost</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Price4</td>
    <td>Names4</td>
    <td>Place4</td>
  </tr>
</table>
</div>

<div class="toggletable" hidden>
<table>
  <tr>
    <th>Cost</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Price5</td>
    <td>Names5</td>
    <td>Place5</td>
  </tr>
</table>
</div>

<script>
function myFunction() {
  var tables = document.getElementsByClassName("toggletable");
  var targetval = document.getElementById("select").value;
  for(var i = 0; i < tables.length; i++){
    if(targetval == i + 1){
        tables[i].removeAttribute("hidden");
    }else{
        tables[i].setAttribute("hidden", true);
    }
  }
}
</script>

</body>
</html>

Toggle tables using Buttons

Tags:

javascript

html

css

KSJaay

3 Answers

Umair Shah Yousafzai

Nidhin Joseph

david oyinbo

Recent Activity

Donate For Us

Toggle tables using Buttons

Tags:

javascript

html

css

KSJaay

3 Answers

Umair Shah Yousafzai

Nidhin Joseph

david oyinbo

Related questions

Recent Activity

Donate For Us