DocumentOutline is a vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.
See a live example here.
Import needed files:
<html>
<head>
<!-- Import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AngeloFaella/DocumentOutline@latest/outline.css">
</head>
<body>
<!-- Wrap your main content in a div -->
<div>
<!-- Use heading tags to structure your document -->
<h1> 1 - Title</h1>
<h2> 1.1 - Subtitle</h2>
<h3> 1.2 - Subtitle</h3>
...
<h1> 2 - Title</h1>
<h2> 2.1 - Subtitle</h2>
<h3> 2.2 - Subtitle</h3>
...
</div>
<!-- Import the library -->
<script src="https://cdn.jsdelivr.net/gh/AngeloFaella/DocumentOutline@latest/DocumentOutline.js"></script>
</body>
</html>Then initialize the outline:
let outline = new DocumentOutline();Or initialize with custom options:
let outline = new DocumentOutline({
backgroundColor: '#02181d',
textColor: 'white',
textColorLight: 'lightgrey',
accentColor: 'rgb(221 201 0)',
defaultOpen: false
});Kind: global class
| Param | Type | Description |
|---|---|---|
| options | Object |
|
| [options.backgroundColor] | String |
background color of the outline |
| [options.textColor] | String |
text color of the first-level sections |
| [options.accentColor] | String |
accent color of the outline |
| [options.textColorLight] | String |
text color of the sub sections |
| [options.defaultOpen] | String |
indicate the initial mode of the outline. Outline is open by default on desktop and closed on mobile. |
Called when a search is submitted
Kind: global function
| Param | Type | Description |
|---|---|---|
| text | String |
text to search |
Show document outline.
On desktop the outline is placed to the left of the main content takes 20% of the width.
On mobile the outline is placed above the main content and takes 100% of the width.
Kind: global function
Hide document outline.
On desktop the outline reduces its width to 3%.
On mobile the outline disappears completely and a floating button appears in the bottom-left corner.
Kind: global function