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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.