Skip to content
StoreDocsSupport
Get Divi Torque

Table of Contents

The Table of Contents module builds a linked list from the headings on your page. Each entry jumps to its heading. The module highlights the section the reader is viewing. It can collapse, stay on screen while the reader scrolls, or show a limited number of headings with a "Show more" button. The module needs Divi 5.

How to add the Table of Contents module

  • Add the Table of Contents module, usually at the top of the page or in a sidebar column.
  • Set the heading-level range under Content > Content.
  • Optionally point the Content Area Selector at a specific region, or leave it empty to auto-detect.

Content

Content

  • Show Title and Title Text: the heading above the list. Default text is "Table of Contents".
  • Start Heading Level and End Heading Level: the range of headings to list, from H1 to H6. Defaults are H2 to H4. Every level in the range is listed.
  • Content Area Selector: a CSS selector for the area to scan for headings. Leave it empty to auto-detect the page content.
  • Exclude Selector: a CSS selector for headings to skip, for example ".no-toc".
  • Minimum Headings: hides the whole module when the page has fewer headings than this. Default is 1.

Behavior

  • Collapsible (whole list): adds a toggle in the title bar to collapse and expand the list. Start Collapsed opens the page with the list collapsed.
  • Collapsible Sub-Headings: adds toggles to items that have sub-headings. Sub-Headings Start Collapsed starts them closed.
  • Collapse Icon: Chevron, Caret (filled), Plus / Minus or Triangle.
  • Smooth Scroll: scrolls to the heading smoothly. On by default. Scroll Offset shifts the stop position, which helps with a fixed or sticky header.
  • Highlight Active Heading: highlights the link of the heading in view while scrolling. On by default.
  • List Marker: Numbered, Bullet, Circle or None. Default is Numbered.
  • View More: shows a limited number of headings with a button to reveal the rest. Off by default. Set Headings Before "View More" (default 5) and the "Show More" Label and "Show Less" Label.
  • Sticky on Scroll: keeps the list on screen while the reader scrolls. Off by default. Sticky Top Offset (default 30px) sets the distance from the top. Sticky Max Height limits the height and scrolls inside the box. 0 means no limit.
  • Hide on Phone: hides the module on screens 767px wide and below.

Design

  • Preset Style: Style Preset picks a ready-made look: Default, Card, Bordered Box, Accent Bar, Filled / Tinted, Numbered Circles or Minimal. Fine-tune the result with the options below or with the Background, Border and Spacing panels.
  • Title: Title Bottom Spacing and the title font options.
  • Links: Link Color, Active Color (also drives the preset accent), Active Background, Hover Color, Marker Color, Link Padding, Item Spacing and Nested Indent.

Tip

Turn on Sticky on Scroll and set a Sticky Max Height. A long contents list then follows the reader down the page without running off the screen.