title: How to check if a table is visible or not with javascript?
body: <p>first of all i'll explain the situation:</p>
  
  <ol>
  <li>I can <strong>ONLY</strong> write in the body of an html, this is because of some limitations.</li>
  <li>I need to replace the website (a profile) for a new one.</li>
  <li>The issue is: the menu should show or hide sections on click... and isn't.</li>
  <li>I don't really know much of javascript, just a bit of python and because of that i'm getting some issues with the code, but i won't learn javascript much either since this will probably be just a once in a lifetime for me.</li>
  <li>I don't want to add jQuery code.</li>
  </ol>
  
  <p>So... i tried this code in <a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_background" rel="nofollow">http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_background</a>, (copy and pasty so you can also check) but it doesnt works as expected, the function for the menu isn't working.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;script&gt;
  function comandos() 
  {
  var visibilidaddecomandos = document.getElementById("comandos").style.display;
    if (visibilidaddecomandos == "hidden")
    {
      document.getElementById("comandos").style.visibility = "visible";
    }
    else if (visibilidaddecomandos == "visible")
    {
      document.getElementById("comandos").style.visibility = "hidden";
    }
  return false;
  }
  
  document.write('&lt;style&gt; #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } &lt;/style&gt; &lt;div id="navcontainer"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" OnClick="comandos()"&gt;&lt;span&gt;Comandos&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Estadisticas&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Juegos&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Sobre mi&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Saelyth&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt;');
  
  document.write('&lt;br&gt;&lt;table id="global" style="background-color:#ffffff; width:460px; height:600px"&gt;&lt;tr&gt;&lt;td style="vertical-align:top"&gt;&lt;table id="comandos" border="2" style="background-color:#000000; float:center"&gt;&lt;tr&gt;&lt;td&gt;&lt;p style="color:red"&gt;Testing the ID table "comandos"&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;');
  
  
  document.body.style.background="#66ffff url('http://images.wikia.com/xenosaga/images/8/86/KOSMOSWikiBG.jpg') no-repeat left top"
  document.title = "¡My not working menu!";
  window.stop();
  &lt;/script&gt;
  
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>