TOC (Table of Contents) jQuery plugin

jQuery plugin is based on the standalone TOC component but it's a lot more flexible and is configurable.

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.0.2.js"></script>

<!-- Minified version -->
<script src="http://samaxesjs.googlecode.com/files/jquery.toc-1.0.2.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> tag or to a JavaScript external file:

$(document).ready(function() {
    $('#toc').toc();
});

Options

Examples

Processes heading levels 2 through 4:

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

Processes all heading levels:

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

Processes heading levels 2 through 5:

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

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

http://samaxes-demos.appspot.com/samaxesjs/toc-jquery.html