A table of contents (ToC) gives the user links at the top of a long page to sections of the page. Here’s an example:

Figure 1. Example

A ToC has two purposes:

• Shows the structure of the document.
• Lets users jump to sections they are most interested in.

I often give a ToC a different look, to draw the user’s attention, and to show that the ToC is separate from the document itself.

Here’s the code that made the ToC in Figure 1. You can see the complete page.

#toc_container {
  padding: 10px;
  border: solid 1px #888888;
  background-color: #DDDDDD;
}
#toc_container li {
  margin-bottom: 10px;
}
#toc_hider {
  text-decoration: underline;
  color: blue;
  cursor: pointer;
}
...
<script type="text/javascript">
  $(document).ready(function() {
    $("#toc_hider").click(function() {
      $("#toc_link_container").toggle('fast');
    });
  });
</script>
...
<div id="toc_container">
  <p>
    Table of contents [<span id="toc_hider">Hide</span>]
  </p>
  <div id="toc_link_container">
    <ol>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#background">Series background</a></li>
      <ol>
        <li><a href="#buffyverse">The Buffyverse</a></li>
        <li><a href="#characters">Characters</a></li>
      </ol>
      <li><a href="#willow_story">Willow's story</a></li>
      <li><a href="#hotness_analyzed">Willowian hotness analyzed</a></li>
      <ol>
        <li><a href="#evidence">Statistical evidence</a></li>
        <li><a href="#dynamics">The psychosexual dynamics of geek males</a></li>
      </ol>
      <li><a href="#conclusion">Conclusion</a></li>
    </ol>
  </div>
</div>
...
<h2 id="introduction">Introduction</h2>
...
<h3 id="buffyverse">The Buffyverse</h3>

Figure 2. Code for the example

Let’s start with the HTML. There are three main sections to it. The first is the overall container, lines 23 to 44. The container has an id of toc_container that’s referenced in the CSS, lines 1 to 5. That style sets the background color (gray), border, and padding.

toc_container has two parts inside it. One is the ToC label, lines 24 to 26. It has a span inside, with an id of toc_hider. Clicking on it will hide or show the ToC. We’ll look at that in a minute.

The other part of toc_container is the set of links to the sections of the article. Each link is a list item. Lists are embedded inside each other, to reflect the structure of the document. For example, the list in lines 31 to 34 is inside the list in lines 28 to 42.

Each link is to an id within the document. That’s what the # means. For example, line 29 has a link to line 46.

Here’s some of the JavaScript again:

$("#toc_hider").click(function() {
  $("#toc_link_container").toggle('fast');
});

Line 19 runs when the thing with the id of toc_hider is run. toc_hider is a span (see line 25). Line 19 tells JavsScript to “find the thing with the id of toc_link_container and toggle its visibility.” toc_link_container contains all of the links.

You can try it.