5 jQuery Table of Content (TOC) Plugins

Sam Deering

Today we are sharing you a collection of 5 jQuery Table of Content (TOC) Plugins. These plugins will dynamically and automatically create an organized table-of-contents list anywhere you want on the page in any style.

1. STOC – Smooth Table of Contents jQuery plugin

Table of Contents with Smooth Scrolling.
STOC
SourceDemo

2. TableOfContents

This plugin creates a table of contents based on the

through

tags of a webpage, or subset of a webpage.
Features:
> Can be scoped to any area of the page
> Automatically determines list type based on the container DOM element for the Table of Contents
> Supports nested ordered and unordered lists, as well as a straight listing of links
> Auto-creates slug-like anchors for each heading (on headings that do not already have an id)
> Supports a proportionateSpacing formatting option to create visual TOC that represent actual amounts of content
> Is fully customizable. No CSS classes or ID’s hard-coded into the plugin.
> Supports multiple instances on one page.
TableOfContents
SourceDemo

3. Tocify

A jQuery plugin that dynamically generates a table of contents. Tocify can be optionally styled with Twitter Bootstrap or jQueryUI Themeroller, and optionally animated with jQuery show/hide effects.
Tocify
Source + Demo

4. Fixed Table of Contents Drop-Down Menu (jQuery Plugin)

A one-page site that uses a fixed drop-down menu at the top of the screen that collapses/expands in a “table of contents” style.
Fixed Table of Contents
SourceDemo

5. jQuery Headerlinks Plugin

The jQuery headerlinks plugin will automatically create a table of contents block anywhere on the page. It has a tremendous amount of flexibility and does many things automagically.
jQuery Headerlinks
Source + Demo

Win an Annual Membership to Learnable,

SitePoint's Learning Platform