Skip to content
jquery.toc.js, an automatic table of contents script
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


jquery.toc.js, an automatic table of contents script. there is no css, for this, you will have the option to style it the way you want it.

The Table of Content will be put in the article tag, including tocbutton. You can change that by renaming the article tag to anything you want: body, div, span etc. Jquery allows selectors, such as div#toc, div.toc.

$("article").prepend(index);, and also the tocbutton: $("article").prepend(tocbutton);

When you don't want to display the ToC anymore, press the tocbutton: [-]. Nothing is display: none; but .remove();, or .removeAttr. It will remove the added id= to the headers, and the Table Of Content itself. and add the tocbutton: [+].


This has all the style needed and will load them in a style tag in the head. When the tocbutton is clicked [+], it will add the needed css files and apply id's to the headers. When you click the tocbutton [-] it will remove everything, not onclick display: none; but onclick .remove();. or removeAttr, it cleans itself completely.

##Demo jquery.toc.js/

This real life demo displays what the current version(0.1) can do.

##Browser support

This script is writen with the help of Jquery, so when when it comes to browsers support:

Both versions 1.x and 2.x of jQuery support "current-1 versions" (meaning the current stable version of the browser and the version that preceded it) of Firefox, Google Chrome, Safari, and Opera. Version 1.x also supports Internet Explorer 6 or higher. However, jQuery version 2.x dropped Internet Explorer 6–8 support (which represents less than 28% of all browsers in use) and supports only IE 9 and later versions. jQuery #Browser support - Wikipedia, the free encyclopedia.

##Paragraphs Support

I'm working on a more detailed jquery.toc.js, that includes paragraph support. In the future maybe more, if i can find out a way to incorporate them properly!

##Double Headers Names

Double headers are not supported and not recommended!

##body Not Body Onload="OnLoad()"

If you edited the .prepend section, then you need to be exact. So, if you typ in the body tag, it will search for exactly that, not <body onload="Onload">.


You can’t perform that action at this time.