nestedToc

nestedToc is a light jQuery plugin that will automatically generate a hierarchical table of contents for your page, based on the heading tags found.

Try it!

Include the file in your page.

If you have a div#my-content and you want to extract a table of contents out of its headings, and put the table in div#my-toc…

  $('#my-toc').nestedToc({container: '#my-content'});

You can pass several options:

container: element to scan the table of contents from. By default: body

Simplest usage:

  $('#my-toc').nestedToc();

How does it look like?

Given this document:

<h2>Title</h2>
Paragraph 1
<h3>Deeper title</h3>
Paragraph 2
<h2>Second title</h2>
Paragraph 3

You'll get:

<ol>
  <li>
    <a href="#Title">Title</a>
    <ol>
      <li>
        <a href="#Deeper-title">Deeper-title</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="#Second-title">Second-title</a>
  </li>
</ol>

The id attribute of the heading tags will be altered in order the links to work.

Styling

Complement the table of contents with the CSS of your choice. Suggestion:

  ol
    counter-reset: section
    list-style-type: none
    ol
      margin-left: 30px
  li
    display: block
    &:before
      counter-increment: section
      content: counters(section,".") ". "

…to get a nice numbered ordering:

1. Title
   1.1. Deeper title
2. Second title

Problems

It is known not to work if there's a gap between levels.

<h2>Title</h2>
<h4>Sub title</h4>

The h4 must have been an h3.

dncrht/nestedToc

nestedToc

Try it!

How does it look like?

Styling

Problems