Generate a Table of Contents Using the DOM | JavaScriptSource

Generate a Table of Contents Using the DOM

Stuart Langridge Feb 27, 2008

General

It's often useful for a long page to contain a table of contents, to make it easy for people to jump to the section they want to read. This script will do the work automatically, generating a table of contents using the <h1> to <h6> tags.


View the demo page here

Notes

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: generated_toc.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(1 comment)

This is a very clever script, however I would have thought that a contents list would be more crucial to those without Javascript enabled and text only browsers. I don't see a complete accessible way around it so would still hard code the Quick links at the top of the page.

Perksy Feb 29, 2008