<div class="toc">
  <p>Table of Content: <a id="toc-toggle" href="">[Hide]</a></p>
  <div id="toc-list">
    $toc$
  </div>
  <script>
  (function() {
    var shown = true,
        tocToggle = document.getElementById('toc-toggle'),
        tocList = document.getElementById('toc-list');
    tocToggle.onclick = function(ev) {
      shown = !shown;
      if (shown) {
        tocToggle.innerText = "[Hide]";
        tocList.className = "";
      } else {
        tocToggle.innerText = "[Show]";
        tocList.className = "no-display";
      }
      ev.preventDefault();
    };
  })();
  </script>
</div>
$body$

<div class="toc">
  <p>Table of Content: <span id="toc-toggle-wrapper"></span></p>
  <div id="toc-list">
    $toc$
  </div>
  <script>
  (function() {
    var shown = true,
        tocToggleWrapper = document.getElementById('toc-toggle-wrapper'),
        tocList = document.getElementById('toc-list');
    var tocToggle = document.createElement('a');
    tocToggle.innerText = "[Hide]";
    tocToggle.href = "";
    tocToggleWrapper.appendChild(tocToggle);
    tocToggle.onclick = function(ev) {
      shown = !shown;
      if (shown) {
        tocToggle.innerText = "[Hide]";
        tocList.className = "";
      } else {
        tocToggle.innerText = "[Show]";
        tocList.className = "no-display";
      }
      ev.preventDefault();
    };
  })();
  </script>
</div>
$body$

Build the toc toggle button with JavaScript.
_website: Build the toc toggle button with JavaScript.

The button no longer show up when JS is disabled; it used to show up but
doesn't do anything.
