James Michael Macgregor Turner
Reputation: 1
How do I hide and show individual tables based on button selction?
So, I am pretty new to Js and I don't really know what I am doing here. I have three links that hide/show 3 different tables. I have gotten them to work but, what I want ideally, is that when the various links are clicked, they should hide the other two tables that are not selected. So, I only in theory have the table that has been selected displaying. I'm not sure how to do this. Would be eternally grateful if someone could point me in the right direction here. I have included my code here.
function toggleTable1() {
var elem = document.getElementById("loginTable1");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}
function toggleTable2() {
var elem = document.getElementById("loginTable2");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}
function toggleTable3() {
var elem = document.getElementById("loginTable3");
var hide = elem.style.display == "none";
if (hide) {
elem.style.display = "table";
} else {
elem.style.display = "none";
}
}<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<a id="loginLink1" onclick="toggleTable1();" href="#">Login1</a>
<a id="loginLink2" onclick="toggleTable2();" href="#">Login2</a>
<a id="loginLink3" onclick="toggleTable3();" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
</th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="34" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>Upvotes: 0
Views: 47
Answers (4)
Sparrow
Reputation: 390
I think this the exact solution for you question
- You can add more table and button to "tableList" array
var tableList = [
{
button: document.querySelector('#loginLink1'),
table: document.querySelector('#loginTable1')
},
{
button: document.querySelector('#loginLink2'),
table: document.querySelector('#loginTable2')
},
{
button: document.querySelector('#loginLink3'),
table: document.querySelector('#loginTable3')
}
]
function toggleTable(button) {
for(var tableItem of tableList) {
if(tableItem.button == button)
tableItem.table.style.display = 'block';
else tableItem.table.style.display = 'none';
}
}
tableList.forEach(tableItem => {
tableItem.button.addEventListener('click', function() {
toggleTable(this);
});
});<a id="loginLink1" href="#">Login1</a>
<a id="loginLink2" href="#">Login2</a>
<a id="loginLink3" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span>
</th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span>
</td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="33" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="34" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt="" /></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>Upvotes: 0
mplungjan
Reputation: 178422
You should delegate and use a data-attribute
I also added a class hide that can be toggled
window.addEventListener("load", function() {
document.getElementById("nav").addEventListener("click", function(e) {
e.preventDefault(); // stop the link
const tgt = e.target;
[...this.querySelectorAll("a")]
.forEach(link => {
document.getElementById(link.dataset.id).classList.add("hide")
});
document.getElementById(tgt.dataset.id).classList.remove("hide")
})
}).hide {
display: none
}<nav id="nav">
<a data-id="loginTable1" href="#">Login1</a>
<a data-id="loginTable2" href="#">Login2</a>
<a data-id="loginTable3" href="#">Login3</a>
</nav>
<table id="loginTable1" width="1139" height="327" border="0">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
</thead>
</table>
<table id="loginTable2" width="1139" height="327" border="0" class="hide">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
</thead>
</table>
<table id="loginTable3" width="1139" height="327" border="0" class="hide">
<thead>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
</thead>
</table>Upvotes: 0
jetsie
Reputation: 11
I would suggest something like this:
function toggleTable1() {
var elem1 = document.getElementById("loginTable1");
var elem2 = document.getElementById("loginTable2");
var elem3 = document.getElementById("loginTable3");
var hide = elem.style.display === "none";
if (hide) {
elem1.style.display = "table";
elem2.style.display = "none";
elem3.style.display = "none";
} else {
elem1.style.display = "none";
elem2.style.display = "none";
elem3.style.display = "none";
}
}
Upvotes: 1
Mohamed Abdallah
Reputation: 996
You need to hide all tables first then show the table you want to show. I modified some of the code to make it more dynamic.
Not much, but honest work.
function hideAllTables(){
document.getElementById("loginTable1").style.display = 'none';
document.getElementById("loginTable2").style.display = 'none';
document.getElementById("loginTable3").style.display = 'none';
}
function toggleTable(tableId){
hideAllTables();
var elem = document.getElementById(tableId)
elem.style.display = "table";
}<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<a id="loginLink1" onclick="toggleTable('loginTable1');" href="#">Login1</a>
<a id="loginLink2" onclick="toggleTable('loginTable2');" href="#">Login2</a>
<a id="loginLink3" onclick="toggleTable('loginTable3');" href="#">Login3</a>
<table id="loginTable1" width="1139" height="327" border="0">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Individuals<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent A</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/1.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent B</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Telephony Agent C</span> </th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/2.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent D</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent E</span></span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/css/images/slider-1/3.png" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;"><span style="color: #005c61; font-size: 12px;">Telephony Agent F</span></span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable2" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Branches<span style="font-weight: 700; text-align: center;"></span></th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Sandton City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="33" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Mall of Africa Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Bank City Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">West Street branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Springs Mall Branch</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Westgate Mall Branch</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<table id="loginTable3" width="1139" height="327" border="0" style="display: none">
<tbody>
<tr>
<th height="53" colspan="5" align="center" bgcolor="#4CB7B7" style="color: #FFFFFF; font-family: open-sans; font-style: normal; font-weight: 700;" scope="row">Leading Region</th>
</tr>
<tr>
<th width="160" height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td width="84" bgcolor="#FFFFFF"> </td>
<td width="309" bgcolor="#FFFFFF"> </td>
<td width="364" bgcolor="#FFFFFF"> </td>
<td width="200" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="56" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Inland</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="34" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: ##005c61; font-size: 12px;">Eastern Cape</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="61" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: ##005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Gauteng North</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/region/[email protected]" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="color: #005c61; font-size: 12px;">Gauteng South</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<th height="59" bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;" scope="row"><span style="color: #005c61; font-size: 12px;">Soshanguve</span></th>
<td colspan="3" bgcolor="#FFFFFF"><img src="assets/img/sliders/branch/[email protected]" width="750" height="35" alt=""/></td>
<td bgcolor="#FFFFFF" style="font-family: open-sans; font-style: normal; font-weight: 700; color: #005c61;"><span style="text-decoration-color: #005c61; font-size: 12px;">Ga-Rankuwa</span></td>
</tr>
<tr>
<th height="20" bgcolor="#FFFFFF" scope="row"> </th>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
</tbody>
</table>
<body>
</body>
</html>Upvotes: 0
Related Questions
- How to hide the table when i click button using js?
- Toggle tables using Buttons
- Show hide multiple tables
- Show/hide element on button click
- Javascript hide certain table rows when a button is clicked
- Multiple tables show/hide refactor
- jQuery: Hide/Show table rows based on clicked button
- Click a button to show or hide a table
- hide table with clicking button
- How to show/hide table onclick