CODEWITHSUNDEEP
javascriptbuttononclicktogglevisible
user12740301
user12740301

Reputation: 15

how to set a table to appear upon 1 click via Javascript

I have set my table to hidden via css, but when I run the onclick function via javascript, It takes two clicks (double click) in order to make the table visible again.

Any idea how I can set this to appear with just one click?

Below are the images to my code

HTML

CSS

Javascript

Upvotes: 1

Views: 264

Answers (2)

Rkv88 - Kanyan
Rkv88 - Kanyan

Reputation: 1332

if you want to use JQuery in your projects you can do this first include jquery in header 

<header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</header>

then just put in onmousedown $('#OperatingScheduler').toggle()

table td{border:dashed;border-color:gray;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <button onmousedown="$('#OperatingScheduler').toggle()">Trading Times</button>
  <button>StudioSchedule</button>
</div>

<table id="OperatingScheduler">
  <tr>
    <td>Day</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>TuesDay</td>
    <td>6am-8am</td>
  </tr>
</table>

when your projects get complicated and bigger you will need jquery to save you huge effort

Upvotes: 0

S14321K
S14321K

Reputation: 230

function showTable()
{
var x = document.getElementById("OperatingScheduler");
if(x.style.visibility=='visible')
{
  x.style.visibility = 'hidden';
}
else
{
  x.style.visibility='visible';
}
}
#OperatingScheduler{
visibility:hidden;
}
<div id="wrapper">
  <button onmousedown="showTable()">Trading Times</button>
  <button>StudioSchedule</button>
</div>

<table id="OperatingScheduler">
  <tr>
    <th>Day</th>
    <th>Time</th>
  </tr>
</table>

Problem solved. ;)

Just change the values in the if else. What your code does is that, on mouse down it straight away goes to else. So table once again its getting hidden. On second click it shows the table.

Upvotes: 0

Related Questions