Commonly used on the Article page, the Table of Contents plugin provides an overview of the structure of the page and links to each section. By default sections are considered to be the content following a heading element (<h1>
- <h6>
) with an ID.
Usage
Via data attributes
You can use data attributes to create a new Table of Contents and specify values for the available options.
Use data-element="table-of-contents"
attribute is used to convert an element into a Table of Contents on page load.
<div data-element="table-of-contents"></div>
Because data attributes are used, you will need to ensure that the allow unsafe HTML setting is enabled within Guide.
Via JavaScript
You can create a new instance of the Table of Contents plugin using JavaScript.
<div id="table-of-contents"></div>
<script type="text/javascript">
ready(function() {
var toc = document.getElementById('table-of-contents');
if (toc) {
new TableOfContents(toc, {
// Options go here
});
}
});
</script>
Options
Options can be passed via data attributes or JavaScript.
For data attributes, append the option name to data-
.
Name | Type | Default | Description |
---|---|---|---|
parentElement | string DOM element null | null | The element in which all elements considered by the plugin are contained. |
selector | string | h1, h2, h3, h4, h5, h6 | The CSS selector used to identify sections. |
template | string null | null | The name of the template to use. |
templateData | object | {} | Additional data to provide to the template rendering function. |
Events
Class | Properties |
---|---|
tableOfContents.render | Fires when the table of contents markup has been rendered and inserted into the DOM. |