Table of Contents jQuery Plugin

Version 0.8
Written by Doug Neiner
Open Sourced under the MIT License

Based on code and concept by Janko Jovanovic in his article: Automatically generate table of contents using jQuery .

This plugin creates a table of contents based on the <h1> through <h6> tags of a webpage, or subset of a webpage. It auto generates slug-like id’s for linking if they are not present already, can optionally add “Top” links to each heading, offers the choice of nested <ol> or <li> lists or straight <a> links, and can optionally create a proportionate display based on the positioning of the headings.

Examples

Features

Future Feature Ideas

Basic Usage

Include the jQuery library and the Table of Contents Plugin

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
	<script src="jquery.tableofcontents.min.js" type="text/javascript" charset="utf-8"></script>

And call the plugin on an empty container element:

	<script type="text/javascript" charset="utf-8">
	    $(document).ready(function(){
	        $("div#toc").tableOfContents();
	    })
	</script>

The container element determines the type of list that is displayed. A <ol> container will produce a nested ordered list. A <ul> container will produce a nested bulleted list. Any other container will produce a straight list of links, no nesting.

You cannot use ul or <ol> containers in combination with the proportionateSpacing option.

Advanced Usage Options

The tableOfContents method takes two parameters:

$("#table-of-contents-container").tableOfContents(scope, options)

scope (default: document.body)

If provided, the scope must be a valid jQuery selector (as a string), jQuery collection object, or null. If scope isn’t null or undefined, it will limit the searching of the plugin to only that object and its children. If scope is null or undefined, then it defaults to document.body.

options (name: default)

The following are the options that can accompany the function call:

$("#toc").tableOfContents(null, { optionName: "optionValue" } );

or can be set ahead of time by changing the defaultOptions object:

$.TableOfContents.defaultOptions.optionName = "optionValue";