Press "Enter" to skip to content

Generates the “Table of Contents” of an HTML Document | DocumentOutline

DocumentOutline is a JavaScript vanilla library that automatically creates a “table of contents” for an HTML document.

The JavaScript library navigates all the title elements within the document and creates a filterable table of contents with anchor links in a full-height collapsible side panel.

How to make use of it:

1. Download the package deal and insert the next information into your HTML web page.

<link rel="stylesheet" href="outline.css" />
<script src="DocumentOutline.js"></script>

2. Initialize the DocumentOutline library and we’re able to go.

let outline = new DocumentOutline();

3. Split your content material into a number of sections utilizing heading components as follows:

<div>
  <h1> 1 - Title</h1>
    ... Content 1 ...
  <h2> 1.1 - Subtitle</h2>
    ... Content 1.1 ...
  <h3> 1.2 - Subtitle</h3>
    ... Content 1.2 ...
  <h1> 2 - Title</h1>
    ... Content 2 ...
  <h2> 2.1 - Subtitle</h2>
    ... Content 1.1 ...
  <h3> 2.2 - Subtitle</h3>
    ... Content 2.2 ...
</div>

4. Available options to config the table of the content panel.

let outline = new DocumentOutline({
    backgroundColor: 'rgb(37, 37, 37)',
    textColor: 'white',
    textColorLight: 'lightgrey',
    accentColor: 'rgb(0, 140, 255)',
    defaultOpen: false
});

5. API strategies.

// show/hide the table of contents
outline.showOutline();
outline.hideOutline();

// called when a search is submitted
outline.onSearchInput(text);

Collapsible Side Table Of Contents, DocumentOutline JS Plugin/Github


See Demo And Download

Official Website(AngeloFaella): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.