TOC (Table of Contents) jQuery plugin

jQuery plugin version of the JavaScript TOC control.

Introduction

The TOC plugin 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 jQuery JavaScript library and one of the following files to your HTML document:

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

<!-- Minified version -->
<script src="http://samaxesjs.googlecode.com/files/jquery.toc-1.1.4.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:

$('#toc').toc();

Options

Examples

Processes heading levels 2 through 4 (default):

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

Processes all heading levels:

$('#toc').toc({exclude: ''});

Processes heading levels 2 through 5:

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

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

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

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

$('#toc').toc({autoId: true});

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

$('#toc').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-jquery.html