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

Question

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

Answer 1

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