5 jQuery Table of Content (TOC) Plugins
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
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
