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

Hierarchical Table Of Contents –  A Vanilla JavaScript plugin used to create a hierarchical, list-based table of contents for long web content. A lightweight and simple table of contents plugin to generate hierarchical in-page navigation for an extended webpage sectioned by heading components.

create table of contents, comprehensive table of contents headings and hierarchy, what is a table of contents

Hierarchical jQuery Folder Tree Structure Plugin In HTML CSS | zTree

How to make use of it:

1. Add the data-no-toc attribute to heading components that must be ignored.

<h4 data-no-toc="">This Heading will be excluded</h4>

2. Create a container to put the table of contents.

<div class="toc-wrapper">
  <div class="toc-header">Table of Contents</div>

3. Initialize the easy-toc plugin and also you’re completed.

let mytoc = new easy_toc( document.querySelector('.toc-wrapper'), {
    // options here

4. Determine an array of heading components to be included. Default: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].

let mytoc = new easy_toc( document.querySelector('.toc-wrapper'), {
    include: ['h1', 'h2', 'h3']

5. Enable or disable the hierarchical construction.

let mytoc = new easy_toc( document.querySelector('.toc-wrapper'), {
    hierarchical: false

6. Customize the anchor connected to the heading components.

let mytoc = new easy_toc( document.querySelector('.toc-wrapper'), {
    prefix: 'easy_toc_',
    anchor_nodename: 'div',
    anchor_class: 'anchor'

7. API strategies.

// update the TOC

// destroy the TOC

Javascript Table of Contents, jQuery Table of Contents Plugin, Hierarchical Table Of Contents Plugin, Create Table of Contents Javascript

See Demo And Download

Official Website(bfiessinger): Click Here

This superior jQuery/javascript plugin is developed by bfiessinger. For extra Advanced Usages, 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…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…