rmurphey

Flexible plugin for nested table of contents

Posted

My partner saw the search results page for this blog and, always on the lookout for a way to improve things, suggested that it would benefit from a table of contents at the top. I could do this with Wordpress, of course, but it sounded like a good idea for a jQuery plugin, too. A little googling showed that there were a couple of existing solutions, but there were two things I wanted that they didn't seem to offer:

• the ability to select via selectors exactly which elements would be included (i.e., #content h2 instead of just h2)
• the ability to nest the lists of sections to reflect the hierarchy of the page

After puzzling a bit over how to get a list of selected elements in the order they appear in the document (see note below), I wrote my own plugin.

• Download the plugin
• View a demo
• jQuery plugin site

Usage: So you can do:

Note

$('h1,h2') will return a jQuery object containing all the h1's in a document, followed by all the h2's in a document: h1 h1 h1 h2 h2 h2. I needed all the h1's and h2's in the document in the order they appeared; so, perhaps, h1 h1 h2 h2 h1 h2 h2. The obvious-in-hindsight answer: Of course, the bad thing about this is that, on pages with lots of elements, it's going to be slow. Any better suggestions?