Dynamic Table Of Contents

Overview

This Free Javascript widget creates a Table Of Contents dynamically from the Heading tags(H1-H6) on your web page. All you have to do is to write your content using standard HTML. The script will then take care of:

Creating nested Table of Contents for as many headings as you like.
Add numbering to the Table of Contents in the format you like (numeric, alphabetical or roman).
Add links dynamically from the Table Of Contents.
Add "To top" links which makes it easy to navigate.

Licensing

This script is licensed under LGPL. Commercial licenses which includes access to the DHTMLGoodies bugs and feature reporting system are also available.

Download

dynamic-table-of-contents.zip

Demo

Demo of "Dynamic Table Of Contents" (Opens in a new window).

Configuration

Include Javascript files

The first you need to do is to include the needed Javascript files in your HTML file like this:

Write your HTML

Write your article, and use the HTML Heading tags(<H1>, <H2>, <H3>, <H4>, <H5>, <H6>), example:

<div class="DG-toc-container" id="myWalkthrough">
<h1>Introduction</h1>
<p>Some introduction notes. Some introduction notes. Some introduction notes. Some introduction notes. </p>
<h1>Ordeon village</h1>
<h2>Characters</h2>
<h3>Link</h3>
<p>Link is our hero in this story. Link is our hero in this story.Link is our hero in this story.Link is our hero in this story.</p>
<h3>Epona</h3>
</DIV>

Create DG.TableOfContents object

Finally, we create an object of class DG.TableOfContents. In it's simplest form, it can look like this':

In this example, when no arguments are sent, the script will look for an element(typicalla div) with class "DG-toc-container" (see code above) and parse through all the heading tags it finds within this element. It will parse Heading, level 1, 2 and 3 and it will use standard numbering.

Config parameters

But, you may also use parameters to configure the TOC. This is code example:

Here, I'm sending these config parameters:

el: Parent element of my Heading tags
tocEl: I want the Table of Contents to be created inside an element with id "tocDiv" (default = above the first H1)
tocDepth: I want a Table Of Contents for H1,H2 and H3, but not H4, H5 and H6.
heading: I want to text of the heading to be Index" (default = "Table of Contents")
numbering.enabled: I'm enabling numbering (default = true))'
numbering.format: In the toc, I want to use numeric(1) for H1, alphabetical(a) for H2 and Roman numerals(i) for H3'
numbering.suffix: I want to have a colon between the number and the text
toTop.enabled: I want to add links back to the Table Of Contents.
toTop.depth: I only want links at the bottom of each H1 tag, not at the bottom of H2, H3, H4, H5 and H6
toTop.txt: I want the text of the to top link to be "Top"

CSS Styling

You can use CSS to add your own styling to the Table of Contents.

This is an example of the code used in the demo:

.DG-toc-heading{ /* Heading "Table of Contents" */
font-size:1.2em;
}
.DG-toc-level-1{ /* LI toc level 1 */
}
.DG-toc-level-2{ /* LI toc level 2 */
}
.DG-toc-level-3{ /* LI toc level 3 */
}
a.DG-toc-anchor-level-1{
text-decoration:underline;
}
a.DG-toc-anchor-level-2{
font-size:0.9em;
}
a.DG-toc-anchor-level-3{
font-size:0.8em;
}
.DG-toc-parent ul{
margin-left:0px;
padding-left:0px;
}
.DG-toc-parent ul li ul{
margin-left:15px;
padding-left:0px;
}
.DG-toc-parent li{
margin-left:0px;
padding-left:0px;
list-style-type: none;
}

CSS Selectors:

DG-toc-heading: CSS for the heading
a.DG-toc-anchor-level-1: Anchor text for H1 in the Table of Contents
a.DG-toc-anchor-level-2: Anchor text for H2 in the Table of Contents. You also have a.DG-toc-anchor-level-3 ... a.DG-toc-anchor-level-6
DG-toc-parent li: Controlling general layout of the Table of Contents. Here, I'm specifying no margin and no bullets (Since I'm using dynamic numbering)
.DG-toc-parent ul li ul: I want some indentation for sub headings(H2 to H6)
.DG-toc-level-1: The Table of Contents is an unordered list(UL,LI). DG-toc-level-1 to DG-toc-level-6 can be used to style the <LI> tags.