I have a unique table for each button. Initially, the tables are hidden using CSS visibility: 'hidden', and when I click a button, the corresponding table displays. However, the issue arises when I click the same button again as it fails to hide the table. Additionally, clicking on other buttons should hide the currently displayed table and show another one.
function toggle() {
if( document.getElementById("Patient-Table").style.visibility='hidden' )
{
document.getElementById("Patient-Table").style.visibility = 'visible';
}
else{
document.getElementById("Patient-Table").remove(visibility);
}
}#Patient-Table {
visibility: hidden;
}<div id="Patient-Table" class="container col-sm-8">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-6">
<h2>List of <b> Patients</b></h2>
</div>
<div class="col-sm-6">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<div class="tables border shadow border-3 mt-3 mb-5">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d8dbc39adfd1cdf4d3d9d5ddd89ad7dbd9">[email protected]</a></td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="deb2b1a9f0b5bba79eb9b3bfb7b2f0bdb1b3">[email protected]</a></td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
<tr>
<td>3 </td>
<td>Low</td>
<td>Key</td>
<td>Male</td>
<td>27</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670b0810490c021e27000a060e0b4904080a">[email protected]</a></td>
<td>+673668292</td>
<td>NewyorkUSA</td>
<td>
<a class='btn btn-primary btn-sm' href='update'>Update</a>
<a class='btn btn-danger btn-sm' href='delete'>Delete</a>
</td>
</tr>
</tbody>
</table>