Sections

Introduction

Base styles

Plugins

Table of Contents

Allow visitors to view the structure of a page and easily navigate between sections.

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 unsage 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.