Revised: Table of Contents for SharePoint Wiki Pages

It’s more then two years ago when I first wrote a table of contents script to enhance wiki pages in SharePoint. Time to release a new version and this time it’s a jQuery plugin. This new version will work potentially work with all versions of SharePoint and Office 365. I just have tested it in SharePoint 2013 and Office 365.
Now I also included support to for all levels of headlines (<h1> – <h6>).
This is possible because a found a good old part in the jQuery Documentation

Table Of Contents - Live in Action

Table Of Contents – Live in Action

:header selector

This selector is not supported by css but jQuery adds support of this pseudo selector. It is a really handy extension because you can select all headlines on a page or just the headlines in parts of your page, for example an article. The support of this pseudo selector was added in jQuery 1.2 almost seven years ago.

The first code snippet selects all headlines on a page. The second only for example in an article.

Table of Content – jQuery plugin

To make all the code reusable for SharePoint I decided to write a jQuery plugin calls “sp.tableOfContents.js”. This plugin has several option that helps you to configure the table of contents easily.

The options

orderedList: Defines if the output should contain <ul> (false) or <ol> (true)
customStyle: adds a custom style sheet class to the table of contents menu
attachTo: defines the element where your table of content should be added to use ID or class selector
prepend: defines if you like the table of content to be prepended (true) or appended (false) to the previous defined element
headlineText: gives your table of contents nice looking label

The usage

To use this script make sure that jQuery and my table of content jQuery plugin is registered in your SharePoint Pages, on an article page or page layout.
The code to make it work looks like this:

I haven’t added all the options in the sample script above but feel free to play around with it. Additional improvements to this scripts are also welcome.

Download or Link

If you like to make it look like on the screenshot you can use the following css file:

Additional Readings