Table of Contents jQuery Plugin

This is just a short Friday post to announce a new jQuery plugin for you to use, fork and adapt for your projects! This plugin takes either a part of a web page, or the entire page, and builds a table of contents based on the H1 through H6 tags. Additionally, it can add “Top” links to the headers, be styled as nested <ol> or <ul> list, be styled as a straight list of links, and it even supports a proportionate spacing style that matches the actual distance between the headers.

All this was inspired yesterday by Janko’s article yesterday, “Automatically generate table of contents using jQuery.” Start by reading his article to get a background on the topic, then head over to the documentation page for the download link as well as three different examples of usage.

This plugin is version 0.8, so please comment on any bugs you find. Feel free to follow or fork the project on github as well! Keep in mind I didn’t spend ages getting the CSS on the example pages to be cross-browser ready, though the plugin itself has full cross-browser support.