Requirements

jQuery 1.7.2+ (It is always recommended to use the latest version of jQuery)

jQueryUI Widget Factory 1.8.21+ (It is always recommended to use the latest version of the jQueryUI Widget Factory)

Optional Dependencies

Twitter Bootstrap or jQueryUI CSS Theme

Note: A Twitter Bootstrap or jQueryUI theme is only required if you want to use either framework to style your table of contents.

Notable Features

Supports forward and back button support

Supports styling with Twitter Bootstrap or jQueryUI Themeroller

Supports show/hide animations with jQuery effects

Supports smooth scrolling animations

Supports dynamic scroll highlighting

Supports dynamic scroll show/hide effects

Supports page extender option to make sure a page is big enough to scroll to all table of content items

Browser Support

Tested in IE7+, Firefox 4+, Chrome, Safari 4+, and Opera 11+

Getting Started

Downloads

Download the latest versions of...

1. jQuery


2. jQueryUI Widget Factory (You only need the Widget component underneath the UI Core dependency)


3. Tocify (You only need jquery.tocify.js and jquery.tocify.css)


4. Twitter Bootstrap or jQueryUI CSS Theme (Only required if you want to use either framework to style your table of contents)

Include CSS and JavaScript files

CSS

                <link type="text/css" rel="stylesheet" href="jquery.tocify.css" />
                <link type="text/css" rel="stylesheet" href="bootstrap.css" />
              

JavaScript

                <script src="jquery-1.7.2.min.js"></script>
                <script src="jquery-ui-1.9.1.custom.min.js"></script>
                <script src="jquery.tocify.min.js""></script>
              

Note: This assumes that you have downloaded the CSS and JavaScript files to the same folder as your HTML page. Modify the href and src attributes if you have a different folder structure.

Also, if you are using jQueryUI to style your table of contents list, then add all of the jQueryUI images to your images folder. Keep in mind that depending on your folder structure, you may need to update the image paths inside of the jQueryUI CSS file.

HTML

Create a div element with a unique id or class (eg. "toc")

                <div id="toc"></div>
              

CSS

Note: Modify the Tocify CSS file to fit your custom needs

JavaScript

Call the plugin: In your JavaScript code, call the tocify() method on your HTML div.

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the tocify method on your HTML div.
                  $("#toc").tocify();
              });
              

Options API

Options

Name	Type	Default	Options
context	String	"body"	Any valid jQuery selector
ignoreSelector	String	null	Any valid jQuery selector
selectors	String	"h1,h2,h3"	Each comma separated selector must be a header element.
showAndHide	Boolean	true	true or false
showEffect	String	"slideDown"	"none", "fadeIn", "show", or "slideDown", or any of the other jQuery show effects
showEffectSpeed	String or Number	"medium"	"slow", "medium", "fast", or any numeric number (milliseconds)
hideEffect	String	"none"	"none", "fadeOut", "hide", "slideUp", or any of the jQuery hide effects
hideEffectSpeed	String or Number	"medium"	"slow", "medium", "fast", or any numeric number (milliseconds)
smoothScroll	Boolean	true	true or false
smoothScrollSpeed	Number or String	"medium"	Accepts Number (milliseconds) or String: "slow", "medium", or "fast"
scrollTo	Number	0	Accepts any number (pixels)
showAndHideOnScroll	Boolean	true	true or false
highlightOnScroll	Boolean	true	true or false
highlightOffset	Number	40	Accepts any number (pixels)
theme	String	"twitterBootstrap"	"twitterBootstrap", "jqueryUI", or "none"
extendPage	Boolean	true	true or false
extendPageOffset	Number	100	Any number (pixels)
history	Boolean	true	true or false
hashGenerator	String or Function	"compact"	"compact", "pretty", function(text, element){}. Compact - #CompressesEverythingTogether. Pretty - #looks-like-a-nice-url-and-is-easily-readable. function(text, element){} - Your own hash generation function that accepts the text as an argument, and returns the hash value.
highlightDefault	Boolean	true	true or false
scrollHistory	Boolean	false	true or false

Setting Options

All options can be set when the plugin is called. Certain options can also be set after the plugin is called using the setOption() or setOptions() methods.

Here is an example of setting a single option when the plugin is first invoked:

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
                  var toc = $("#toc").tocify({ showEffect: "fadeIn" });
              });
              

Here is an example of setting a single option after the plugin is first invoked using the setOption method:

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Sets the smoothScroll option to false
                  toc.setOption("showEffect", "fadeIn");

              });
              

Here is an example of setting a multiple options after the plugin is first invoked using the setOptions method:

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  // Calls the selectBoxIt method on your HTML select box and updates the showEffect option
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Sets the showEffect, scrollTo, and smoothScroll options
                  toc.setOptions({ showEffect: "fadeIn", scrollTo: 50, smoothScroll: false });

              });
              

Getting Options

A single option can be retrieved by using the option() method. All of the current options can be retrieved by referencing the options property.

Here is an example of retrieving a single option after the plugin is called using the option() method:

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the tocify method on your HTML div
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Writes the showEffect option to the console
                  console.log(toc.option("showEffect"));
              });
              

Here is an example of retrieving all current options after the plugin is called using the options property:

              //Executes your code when the DOM is ready.  Acts the same as $(document).ready().
              $(function() {
                  //Calls the selectBoxIt method on your HTML select box
                  var toc = $("#toc").tocify().data("toc-tocify");

                  // Writes all of the current plugin options to the console
                  console.log(toc.options);
              });
              

Inspired By

Can.js

JavaScript Garden

Donation

If you would like to support the Tocify project, please consider sending a donation to Greg Franko (the project maintainer). All donations (small or large) are appreciated and help the continued development of the project.