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.

Download zipped archiveView the example

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.

Doug Neiner is an Editor at Fuel Your Coding and an official member of the jQuery Team. He is addicted to new technology, and specifically loves spending time with WordPress, Ruby on Rails and jQuery. Learn more via twitter or his Google Profile.


If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote