CODEWITHSUNDEEP
javascript
Jacky
Jacky

Reputation: 781

How to hide the table when i click button using js?

First of all the view page shows only two buttons leave and attendance. when i click the leave button i shows the table(tb2).and again i click the that button it hide the table enter image description here

When i click the attendance i display the another table(tb3).it is same as previous enter image description here

Now for me i want when i click the leave button the opened attendance table should be closed and it same for the attendance button.

My code:

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show')

};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show')
};

Upvotes: 0

Views: 69

Answers (2)

gilbertdim
gilbertdim

Reputation: 357

Use JQuery it will make things easy.

$('#btnLeave').click(function(){
   if($('#tblLeave').css('display')=='none'){
      $('#tblLeave').css('display','block');
   } else {
      $('#tblLeave').css('display','none');
   }
});

$('#btnAttendance').click(function(){
   if($('#tblAttendance').css('display')=='none'){
      $('#tblAttendance').css('display','block');
   } else {
      $('#tblAttendance').css('display','none');
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>

<br><br>
<table id="tblLeave" style="border: 1px solid; width: 100%; display: none">
  <thead>
    <td>Leave<td>
  </thead>
<table>
<br>
<table id="tblAttendance" style="border: 1px solid; width: 100%; display: none">
  <thead>
    <td>Attendance<td>
  </thead>
<table>

Or Alternating the show and hide of two tables

$('#btnLeave').click(function(){
   if($('#divLeave').css('display')=='none'){
      $('#divLeave').css('display','block');
      $('#divAttendance').css('display','none');
   }
});

$('#btnAttendance').click(function(){
   if($('#divAttendance').css('display')=='none'){
      $('#divAttendance').css('display','block');
      $('#divLeave').css('display','none');
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnLeave">Leave</button>
<button id="btnAttendance">Attendance</button>

<br><br>
<div id="divLeave">
  <table id="tblLeave" style="border: 1px solid; width: 100%;">
    <thead>
      <td>Leave<td>
    </thead>
  </table>
</div>
<br>
<div id="divAttendance" style="display: none; position: absolute; top: 47px; width: 100%">
  <table id="tblAttendance" style="border: 1px solid; width: 100%">
    <thead>
      <td>Attendance<td>
    </thead>
  </table>
</div>

Upvotes: 0

Vivek Jain
Vivek Jain

Reputation: 44

var click = document.getElementById('clickme');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb2');
   tablewrap.classList.toggle('show');

   document.getElementById('tb3').classList.remove('show');


};


var click = document.getElementById('click');
click.addEventListener('click', myfunction);

function myfunction() {
   var tablewrap = document.getElementById('tb3');
   tablewrap.classList.toggle('show');

document.getElementById('tb2').classList.remove('show')

};

Remove the classes explicitly

Upvotes: 1

Related Questions