Solid.Things:   Home   >   jQuery autoTOC

Description

Yet another jQuery-base table-of-contents (ToC) generator! jQuery makes the processing so easy, but everyone has a different idea of how to structure a ToC, and this is how I like to do mine (though my current styling - totally independent of this plugin - is pretty naff).

Use

  1. Put a DIV in your page where you want the ToC to go, giving an ID. eg: 
    <div id="TOC">
  2. In your jQuery ready() function (typically in the page HEAD) invoke autoTOC against the DIV.
    This page has the following in its HEAD:

Options

Behaviour can be controlled with the following options:

Field Default Description
selector h2, h3, h4 jQuery selector string used to select all candidate elements for this ToC.
eg: to allow h1-h6, use:
$("#TOC").autoTOC({selector: "h1,h2,h3,h4,h5,h6"});
autoIndent true

Whether to indent TOC items for elements using their position in the selector list. This assumes that selector is an ordered, comma-separated, list of tag names.

eg: with the default selector, each heading after H1 will normally be indented.

But, indent only happens if higher level selectors exist on the page.
ie: if the page only contains H5's and H6's, H6's will be indented one (UL) level below the H5's.

Also, any :qualifier in the selector is ignored when working out the levels. eg:
$("#TOC").autoTOC({selector: "h2:not(.noTOC),h3"});
will indent the same way as:
$("#TOC").autoTOC({selector: "h2,h3"});
cols 4 Preferred number of columns in ToC (assuming enough items). Could be more than this if too many orphans.
colSuffixSections null Allows for adding arbitrary HTML to each column in the ToC (eg: off-page links).

If non-null, is an array of HTML to add to column(s) in the ToC. The array is reverse-indexed from the last column in the ToC; ie: item[0] is appended to the last column, item[1] to the penultimate one, etc.

eg: to add "See also: home" to the last column:

$("#TOC").autoTOC({colSuffixSections: ["<br/>See also<a href='...'>home</a>"]});
avoidOrphans true

TRUE if selector is a precedence-ordered, comma-separated, list of tagnames and child elements are not to be orphaned by a column break in the ToC.

Thus, with the default selector, an h2-generated item that is due to fall at the end of a column will be pushed to the top of the next column if it precedes an h3-generated one (that would otherwise be top of the next column).
LIclassPrefix null If non-null, each LI in the TOC is given a CSS class of this name plus the tagName (uppercase) of the element it was generated from as: prefix-tagName
eg: if LIclassPrefix is set to "TOC", an entry from an H2 would be given class="TOC-H2". For instance, in: 
$("#TOC").autoTOC({  LIclassPrefix: "TOC"
                   , colSuffixSections: [addToLastCol]
                   , cols: 2
                  });
addInfo
debug		 false Debugging/development aids.

Release History

Download

jquery.autotoc.js

Page last edited: 27-Oct-2021