Headings Example

One

This is chapter 1.

One - One

This is chapter 1.1.

One - One - One

This is chapter 1.1.1

One - One - Two

This is chapter 1.1.2

Two

This is chapter 2

Two - One

This is chapter 2.1

Two - One - One

This is chapter 2.1.1

Two - One - One - One

This is chapter 2.1.1.1

Two - One - One - Two

This is chapter 2.1.1.2

Two - One - One - Three

This is chapter 2.1.1.3

Two - One - Two

This is chapter 2.1.2

Two - Two

This is chapter 2.2

Two - Three

This is chapter 2.3

Two - Three - One

This is chapter 2.3.1

Two - Three - Two

This is chapter 2.3.2

Two - Three - Two - One

This is chapter 2.3.2.1

Three

This is chapter 3

Three - One

This is chapter 3.1

Four

This is chapter 4

Nesting Example

One

This is chapter 1.

One - One

This is chapter 1.1.

One - One - One

This is chapter 1.1.1

One - One - Two

This is chapter 1.1.2

Two

This is chapter 2

Two - One

This is chapter 2.1

Two - One - One

This is chapter 2.1.1

Two - One - One - One

This is chapter 2.1.1.1

Two - One - One - Two

This is chapter 2.1.1.2

Two - One - One - Three

This is chapter 2.1.1.3

Two - One - Two

This is chapter 2.1.2

Two - Two

This is chapter 2.2

Two - Three

This is chapter 2.3

Two - Three - One

This is chapter 2.3.1

Two - Three - Two

This is chapter 2.3.2

Two - Three - Two - One

This is chapter 2.3.2.1

Three

This is chapter 3

Three - One

This is chapter 3.1

Four

This is chapter 4

Custom Example

One

This is chapter 1.

One - One

This is chapter 1.1.

One - One - One

This is chapter 1.1.1

One - One - Two

This is chapter 1.1.2

Two

This is chapter 2

Two - One

This is chapter 2.1

Two - One - One

This is chapter 2.1.1

Two - One - One - One

This is chapter 2.1.1.1

Two - One - One - Two

This is chapter 2.1.1.2

Two - One - One - Three

This is chapter 2.1.1.3

Two - One - Two

This is chapter 2.1.2

Two - Two

This is chapter 2.2

Two - Three

This is chapter 2.3

Two - Three - One

This is chapter 2.3.1

Two - Three - Two

This is chapter 2.3.2

Two - Three - Two - One

This is chapter 2.3.2.1

Three

This is chapter 3

Three - One

This is chapter 3.1

Four

This is chapter 4

Auto-Generated Structural Overview

When you want to automatically generate a structural overview of your HTML document (table-of-contents, or a folded document), you need to work out the document in one of two structures:

either using headings <h1> to <h6>,
or nesting elements like <div> or <section> into each other

Below you have examples of both forms.
Press one of the "Example" buttons to see an example document and its HTML source.
Press one of the "With TOC" buttons to see it with table-of-contents.
Press one of the "As Tree" buttons to see it with folding-controls.

The JavaScript (see sources on page-bottom) identifies the structure by the given parameter headingTags. By default it would try to guess the structure: when at least two different heading-tags (e.g. h2 and h3) were found, it would analyze by heading tags, else it would try to find div, then section, then article. If none succeeds, the script will fail.

Here is the documentation of script parameters (which you can try out in the UI below):

    /**
     * @param topElement optional, the HTML element to create structure for,
     *     defaults to document body.
     * @param headingTags optional, the CSS selector to use for search of structuring elements,
     *     defaults to a guess-algorithm.
     * @param tocContainer optional, the container where to insert the created TOC,
     *     defaults to below a singlular H1, or on top of topElement.
     * @param treeIndentInEm optional, for nested elements, the amount of tree-indentation in em,
     *     for TOC defaults to HTML-UL default, for tree-folding defaults to zero.
     * @param doTocNumbering optional, chapter numbers are prepended to TOC when true,
     *     defaults to true.
     * @param doHeadingNumbering optional, chapter numbers are prepended to headings when true,
     *     defaults to true.
     * @param chapterNumberSeparator optional, separator for chapter numbers,
     *     defaults to ".".
     * @param doTrailingSeparator optional, when true chapter numbers will be
     *     "1.2." instead of "1.2", defaults to false.
     * @param initiallyFolded optional, whether chapters should be initially collapsed,
     *     defaults to false.
     */