TOC (Table of Contents) control

JavaScript component initially inspired by A Dynamic Table of Contents Script by Matt Whitlock:

For long, heavily-edited HTML documents, it becomes a major nuisance to keep a table of contents up to date. Perhaps even more annoying is keeping all of the section numbers contiguous and increasing. I offer a JavaScript solution here that dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings.

Introduction

The TOC control dynamically builds a table of contents from the headings in a document and prepends legal-style section numbers to each of the headings:

adds numeration in front of all headings,
generates an HTML table of contents,
degrades gracefully if JavaScript is not available/enabled.

Usage

This extension parses the given DOM node children to find existing headings, and numerates them according to their hierarchical structure.

Note: In order for a TOC entry to have an anchor pointing to the corresponding heading, the id attribute is required on that element.

Installation

Add one of the following lines within the <head> tag of your HTML document:

<!-- Normal version -->
<script src="http://samaxesjs.googlecode.com/files/samaxesjs.toc-1.5.js"></script>

<!-- Minified version -->
<script src="http://samaxesjs.googlecode.com/files/samaxesjs.toc-1.5.min.js"></script>

Put the TOC container where you want the table of contents to appear:

<div id="toc"></div>

Edit your HTML document and add the following code to a <script> block just before the </body> end tag:

samaxesJS.toc();

Options

Option	Type	Default
container	String	"toc"
exclude	String	"h1, h5, h6"
context	String	""
autoId	Boolean	false
numerate	Boolean	true

Examples

Processes heading levels 2 through 4 (default):

samaxesJS.toc();
// same as: samaxesJS.toc({container: 'toc', exclude: 'h1, h5, h6', context: '', autoId: false, numerate: true});

Processes all heading levels:

samaxesJS.toc({exclude: ''});

Processes heading levels 2 through 5:

samaxesJS.toc({exclude: 'h1, h6'});

Processes heading levels 2 through 5 inside an element with the id myElement:

samaxesJS.toc({exclude: 'h1, h6', context: 'myElement'});

Generate header's id attribute when it doesn't exist:

samaxesJS.toc({autoId: true});

Disable header's numeration generation (useful when using CSS counters):

samaxesJS.toc({numerate: false});

CSS Style

Style your TOC to suppress the list markers that would normally adorn the list items, take this CSS snippet as an example:

div#toc ul {
    list-style: none;
}
div#toc ul li ul {
    margin-bottom: 0.75em;
}
div#toc ul li ul li ul {
    margin-bottom: 0.25em;
}

Demo

https://samaxesjs.googlecode.com/svn/trunk/demo/toc-standalone.html