我在每个按钮中都有不同的表格，我通过将可见性隐藏在css中来隐藏表格，当我单击表格将显示的按钮时。问题是，当我再次单击该按钮时，它将不再隐藏该表。另一件事是，当我单击其他按钮时，当前显示的表格将隐藏，然后将显示另一个表格。

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>low.key@gmail.com</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>low.key@gmail.com</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>low.key@gmail.com</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>