jQuery Elixon TOC
↑ Choose the TOC template from the select box above.
show source code [+]hide source code [×]
↑ bootstrap3.navbar is used in the menu above.

Introduction

Elixon TOC generator is easy-to-use jQuery plugin that automatically creates smart HTML table of contents. It automatically tracks window scrolling and highlights currently viewed chapters.

Highlights

Get Started

Include jQuery

This script requires jQuery. If you don't have jQuery on your page already add this line to your head element: 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Include jQuery Elixon TOC

Include jQuery Elixon TOC after the jQuery script link: 
<link href="…/jquery.toc.css" type="text/css" rel="stylesheet"/>
<script src="…/jquery.toc.js" type="text/javascript"></script>
Replace … with correct path.

Insert TOC

Place the TOC generating HTML tag anywhere on the page: 
<div toctemplate="elegant"></div>
For more HTML options refer to HTML Element section.

Celebrate

That's it! You did it! Keep reading for more examples and other tricks.

Examples

  1. Simple HTML Way

    Generate elegant TOC from h2 and h3 elements that are inside the element with id article. 

    <div tocfrom="#article h2, #article h3" toctemplate="simple"></div>

  2. Simple Javascript Way

    Generate modern TOC appended to an element with id myElement from h2 and h3 elements that are inside the element with id article. 

    $("#myElement").toc("#article h2, #article h3", "modern");

  3. Nonstandard Headers

    You can generate a Table Of Contents using other elements then h1, h2 and so on. Simply specify the ordered array with jQuery selectors.

    Consider this example 

    <a title="About Us" class="lvl1">Chapter 1</a>
    <p>Lorem ipsum …</p>

    <a title="Company" class="lvl2">Chapter 1.1</a>
    <p>Lorem ipsum …</p>

    <a title="Location" class="lvl2">Chapter 1.2</a>
    <p>Lorem ipsum …</p>

    <a title="Map" class="lvl3">Chapter 1.2.1</a>
    <p>Lorem ipsum …</p>

    <a title="Products" class="lvl1">Chapter 2</a>
    <p>Lorem ipsum …</p>

    Generate headings from three levels of HTML links. Use the title attribute on the link as TOC item label. 

    $("#myElement").toc(["a.lvl1", "a.lvl2", "a.lvl3"],  function() {return $(this).attr("title");});

Complete Example

<!doctype html>
<html>
  <head>
	<title>Example Domain</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
	<link href="…/jquery.toc.css" type="text/css" rel="stylesheet"/>
	<script src="…/jquery.toc.js" type="text/javascript"></script>
  </head>

  <body>
	<div>

	  <h1>Table Of Contents</h1>
	  <div toctemplate="default:nohilite"></div>

	  <h1>Chapter 1</h1>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

	  <h2>Chapter 1.1</h2>
	  <p>Fusce ut iaculis risus. Quisque vehicula elementum neque.</p>

	  <h1>Chapter 2</h1>
	  <p>Ac feugiat leo vehicula eget. Aenean rutrum iaculis.</p>

	  <h2>Chapter 2.2</h2>
	  <p>Phasellus velit tortor, mollis ullamcorper purus.</p>

	</div>
  </body>
</html>
Replace … with correct path.

API

HTML Element

Syntax: 
<HTMLELEMENT [ tocfrom="SELECTOR" ] [ toctemplate="TEMPLATENAME" ] [ tocoffset="OFFSET" ]/>
Example: 
<div tocfrom=".contents h1, .contents h2" toctemplate="modern"></div>
Note that elements dynamically generated after document load must be initialized using Javascript.

Javascript

Syntax: 
jQueryObject.toc([ARG[, ARG[, …]]]);
Example: 
$("#mainTOC").toc("modern");
Where ARG can be one of

Features

The FEATURES keyword explanation: