Generate Table of Contents HTML Document | Tocbot TOC

Table of Contents – Tocbot is a straightforward but extremely customizable TOC generator created with pure JavaScript. Tocbot creates a table of contents (TOC) from headings in an HTML document. This is useful for documentation sites or long sale pages because it’s easy to navigate.

css table of contents example, table of contents html template example, table of contents html & css, creating a table of content of a book using html, dynamic table of contents html

How to Create a Hierarchical Table of Contents in Javascript Plugin | Easy-TOC

Basic utilization:

Install the Tocbot by way of NPM:

$ npm install tocbot --save

Import the mandatory sources into your module.

import Tocbot from 'tocbot';

Alternatively, you possibly can load the Tocbot’s records data from a CDN.

<link rel="stylesheet" href="">
<script src=""></script>

Add distinctive IDs to your headling parts throughout the doc.

<div class="js-toc-content">
 <h1 id="1">Section 1</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. Nullam sed vestibulum purus, in auctor libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui, nec fermentum urna porta ultrices. Nullam sed vestibulum purus, in auctor libero.</p>
 <h2 id="2">Section 2</h2>
 <h2 id="3">Section 3</h2>

Create a container to place the generated table of contents.

<div class="js-toc"></div>

Initialize the Tocbot library and accomplished it.


Override the next choices to customize the table of contents.


  // Where to render the table of contents.
  tocSelector: '.js-toc',

  // Where to grab the headings to build the table of contents.
  contentSelector: '.js-toc-content',

  // Which headings to grab inside of the contentSelector element.
  headingSelector: 'h1, h2, h3',

  // Headings that match the ignoreSelector will be skipped.
  ignoreSelector: '.js-toc-ignore',

  // For headings inside relative or absolute positioned containers within content
  hasInnerContainers: false,

  // Main class to add to links.
  linkClass: 'toc-link',

  // Extra classes to add to links.
  extraLinkClasses: '',

  // Class to add to active links,
  // the link corresponding to the top most heading on the page.
  activeLinkClass: 'is-active-link',

  // Main class to add to lists.
  listClass: 'toc-list',

  // Extra classes to add to lists.
  extraListClasses: '',

  // Class that gets added when a list should be collapsed.
  isCollapsedClass: 'is-collapsed',

  // Class that gets added when a list should be able
  // to be collapsed but isn't necessarily collpased.
  collapsibleClass: 'is-collapsible',

  // Class to add to list items.
  listItemClass: 'toc-list-item',

  // How many heading levels should not be collpased.
  // For example, number 6 will show everything since
  // there are only 6 heading levels and number 0 will collpase them all.
  // The sections that are hidden will open
  // and close as you scroll to headings within them.
  collapseDepth: 0,

  // Smooth scrolling enabled.
  scrollSmooth: true,

  // Smooth scroll duration.
  scrollSmoothDuration: 420,

  // Callback for scroll end.
  scrollEndCallback: function (e) { },

  // Headings offset between the headings and the top of the document (this is meant for minor adjustments).
  headingsOffset: 1,

  // Timeout between events firing to make sure it's
  // not too rapid (for performance reasons).
  throttleTimeout: 50,

  // Element to add the positionFixedClass to.
  positionFixedSelector: null,

  // Fixed position class to add to make sidebar fixed after scrolling
  // down past the fixedSidebarOffset.
  positionFixedClass: 'is-position-fixed',

  // fixedSidebarOffset can be any number but by default is set
  // to auto which sets the fixedSidebarOffset to the sidebar
  // element's offsetTop from the top of the document on init.
  fixedSidebarOffset: 'auto',

  // includeHtml can be set to true to include the HTML markup from the
  // heading node instead of just including the textContent.
  includeHtml: false,

  // orderedList can be set to false to generate unordered lists (ul)
  // instead of ordered lists (ol)
  orderedList: true,

  // If there is a fixed article scroll container, set to calculate titles' offset
  scrollContainer: null,

  // prevent ToC DOM rendering if it's already rendered by an external system
  skipRendering: false,

  // Optional callback to change heading labels. 
  // For example it can be used to cut down and put ellipses on multiline headings you deem too long.
  // Called each time a heading is parsed. Expects a string in return, the modified label to display.
  // function (string) => string
  headingLabelCallback: false,

  // ignore headings that are hidden in DOM
  ignoreHiddenElements: false,

  // Optional callback to modify properties of parsed headings.
  // The heading element is passed in node parameter and information parsed by default parser is provided in obj parameter.
  // Function has to return the same or modified obj. 
  // The heading will be excluded from TOC if nothing is returned.
  // function (object, HTMLElement) => object | void
  headingObjectCallback: null,

  // onclick function to apply to all links in toc. will be called with
  // the event as the first parameter, and this can be used to stop,
  // propagation, prevent default or perform action
  onClick: false

Refresh the Tocbot.


Destroy the Tocbot and take away the table of contents from DOM.


jquery table of contents js, Auto-Generate Table of Contents Using Tocbot

See Demo And Download

Official Website(tscanlin): Click Here

This superior jQuery/javascript plugin is developed by tscanlin. For extra advanced usage, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…


Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…


A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…


First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…


Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…