Custom table of contents webpart

Question

Say I have a page that is really long, with marked Headers 1,2,3, etc. Would it be possible to create a webpart that will auto-generate the table of contents, based on the marked headers and put it in a column to the right?

I know that the webpart has a table of contents, but that only takes the whole site instead of a specific page. Any help greatly appreciated! :)

Answer 1

This could be done with jQuery in an hour or two with properly defined content. You would need to identify a unique place in the document to generate the ToC as well as be able to identify the headers to be included. jQuery could even add Anchors in the content to allow for hyperlinks directly to the sections.

The actual syntax would vary depending on your structure and needs but basically you would use jQuery/javascript to grab the ToC Container, then use jQuery to search the rest of the page for the Header Text to be included and then dynamically build that list and write it into ToC Container as HTML. It would probably look something like this:

jQuery(".ClassOfHeaderText").each(function() {
   /// build new ToC Html with title / links
   newToCHtml += "<li>" + jQuery(this).text() + "</li>"
});

jQuery("#IDOrClassOfToCContainer").html(newToCHtml)