title: javascript/html/css Show/hide box
body: <p>I have done something like this before but this time code is not working.  Basically, I want to let users toggle a box of html on and off.  Here is a jsfiddle</p>
  
  <p><a href="http://jsfiddle.net/2pcwW/" rel="nofollow">http://jsfiddle.net/2pcwW/</a></p>
  
  <p>There are several problems with this.  First it isn't working as is possibly due to a typo.  Second, I would like the default to be hide text, not show it, the opposite of what this tries to do.  Finally, is it possible to place a table inside of the div so the whole table gets toggled on and off--in place of just "some text". </p>
  
  <p>Here is non working code..same as in jsfiddle.</p>
  
  <pre><code>JS:
  function toggleBox(obj) {
              var box = document.getElementById("box");
              if (box.style.display == "none") {
                  box.style.display = "";
                  obj.innerHTML = &lt;div&gt;Hide&lt;/div&gt;;
              } else {
                  box.style.display = "none";
                  obj.innerHTML = &lt;div&gt;Show&lt;/div&gt;";
              }
          }
  html:
  &lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;div&gt;
  &lt;a href="javascript:void(0)" onclick="toggleBox(this);"&gt;&lt;div&gt;Hide&lt;/div&gt;&lt;/a&gt;&lt;div id="box"&gt;
  Some text&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  </code></pre>
  
  <p>Thanks for any suggestions.</p>