Table of Contents

Easy Table Of Contents Example

Simple and lightweight Table of contents.

Usage 

           
        let my_toc = new easy_toc( document.querySelector('.my-toc-wrapper'), {
                include: [
                        'h1',
                        'h2',
                        'h3',
                        'h4',
                        'h5',
                        'h6'
                ],
                exclude: [
                        '[data-no-toc]'
                ],
                prefix: 'easy_toc_',
                hierarchical: true,
                anchor_nodename: 'div',
                anchor_class: 'anchor'
        } );
        my_toc.init();

Options

include
Type: Array
Default: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']

Query Selectors to include in table of contents

exclude
Type: Array
Default: ['[data-no-toc]']

Query Selectors to exclude from table of contents

prefix
Type: string
Default: easy_toc_

a prefix to use in classes, id's and anchors

hierarchical
Type: boolean
Default: true

whether or not create a hierarchical structure

anchor_tagname
Type: string
Default: div

tagname for the wrapper around the heading

anchor_class
Type: string
Default: anchor

Classname for TOC anchortags

Methods

init() 

           
        // Init
        my_toc.init();

update() 

           
        // Basically just an alias for init()
        my_toc.update();

destroy() 

           
        // Destroy the current TOC
        my_toc.destroy();

Exclude Headings

This Heading will be excluded

You can exclude headings with data-no-toc or whatever is specified in settings.exclude

Demo Heading H2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Demo Heading H2

Headings with the same content still work. A counter will update the slug for the specific Heading

Demo Heading H3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.