How to make a button show a table onclick

Question

I am trying to embed a table inside a button to no avail, such that when the button is clicked the table shows and when it is clicked again, the table disappears. Here is a copy of my code:

function myfunction(){    
  document.getElementById("displaytable").style.display = "none";   
}

<input type="button" value="Button1" onclick='myfunction();'>
<div id="displaytable" style="visibility: hidden">
  <table id="displaytable" style="display: none; width: 100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
      <td class="lbl">column1</td>
      <td class="lbl">column2</td>
      <td class="lbl">column3</td>
    </tr>
    <tr>
      <td align="center">1</td>
      <td align="center">2</td>
      <td align="center">33</td>
    </tr>
    <tr>
      <td align="center">4</td>
      <td align="center">5</td>
      <td align="center">6</td>
    </tr>
  </table> 
</div>

Solution

You should change the ID of your input to another ID, and then your function just need to be as below:

function myfunction()
{
    if (document.getElementById("displaytable").style.display === "none")
        document.getElementById("displaytable").style.display="block";
    else
        document.getElementById("displaytable").style.display="none";
}

Comments

[Danmoreng]

You want a simple toggle function. Inside your function check for the current state of the table, if it is displayed or not, and then set the opposite.

[Admin]

Ive provided both a jquery and javascript solution and btw you need to make another update, remove the "display:none" from your table and replace visibility:hidden to display:none in your div as shown in my code.

[lloyd]

Is it possible to do this for menus in a drop down list as they only seem to accept links

[Milad Rashidi]

In your fiddleJS sample when I clicked on button it doesn't disappear the table!

[DanteTheSmith]

@MiladRashidi Works perfectly for me. I updated just in case.

[DanteTheSmith]

I linked the wrong fiddleJS. It's missing the toggle code it only switches table to be displayed. My bad

[Milad Rashidi]

Now it's seems like my solution and it is working correctly.

[DanteTheSmith]

Glad you went with vanilla also. Add a lib cause of 2 liner. Why not put angular on top just so you can toggle button :D

[DanteTheSmith]

It's a simple changing on property in DOM element done via vanilla JS. Every displayable element should work with this. What do you mean by they only accept links?