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.

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.

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.

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.

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.

Source + Demo

Meet the author

Sam Deering

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.