Creating a dynamic table of contents

A table of contents is a common way to allow users to quickly get to the section of content they are looking for. With jQuery, it is possible to create a table of contents dynamically, based on the HTML header elements on the page. This is very useful for blog posts or other sites that have lots of different content pages.

Getting ready

Create recipe-5.html, recipe-5.css, and recipe-5.js as before and have all three open and ready for editing.

How to do it…

With the required files created, perform the following steps to create a dynamic table of contents:

  1. Create a basic web page using the following HTML code, adding it to recipe-5.html:
    <!DOCTYPE html> <html> <head> <title>Chapter 6 :: Recipe 5</title> <link href="recipe-5.css" ...

Get jQuery 2.0 Development Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.