5 jQuery Table of Content (TOC) Plugins

By 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.

2. TableOfContents

This plugin creates a table of contents based on the


tags of a webpage, or subset of a webpage.
> 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.

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.
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

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



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.