This module provides a [oxy_toc] shortcode for displaying an automatically generated collapsible Table of Contents (TOC) consisting of a list of the headings on the current page.
Screenshot:
The shortcode can be placed either in the WordPress editor or in the Oxygen editor using a Shortcode component.
Offset for sticky header (for the Header Builder component) is automatically taken care of.
Smooth scrolling of the hash links can be turned on by enabling it in the Oxygen editor either at the global (Settings > Global Styles > Scripts > Smooth Scroll To Hash Links) or post level (Settings > Page settings > Scripts > Smooth Scroll To Hash Links).
The module’s [oxy_toc] shortcode has several parameters to control the container in which the headings are looked for, what headings to look for, whether the output should be in an ordered list or an unordered list, whether the TOC should be collapsed etc.
Parameter: title
Default value: Table of Contents
Detail: If left blank, title text will be empty.
Parameter: tag
Default value: ul
Other possible value: ol
Detail: Whether the TOC list should be an unordered list (with bullets) or ordered list (with numbers).
Parameter: content
Default value: .ct-inner-content
Detail: This should be a CSS selector of the container on the current page in which the module should scan for the specified headings to build the TOC.
Parameter: headings
Default value: h1,h2,h3
Detail: What headings on the current page should be included in the TOC. These can also be valid CSS selectors like h1.my-heading and even be :not pseudo-class so you can exclude any unwanted headings.
Parameter: collapsed
Default value: false
Other possible value: true
Detail: Whether the TOC list should be expanded or collapsed.
Show all h1, h2, h3 headings on the current page that are inside any element having the class of ct-inner-content as an unordered list expanded with the title of Table of Contents:
[oxy_toc]Show TOC of headings that are inside an element having an ID of section-12-299:
[oxy_toc content="#section-12-299"]Show TOC of headings in the entire page incl. those if any in the header, footer etc.:
[oxy_toc content="body"]Show only headings of h1 level:
[oxy_toc headings="h1"]Show all h1 headings, all h2 headings and all h3 headings except the h3 that has an ID of headline-23-225 in body:
[oxy_toc content="body" headings="h1,h2,h3:not(#headline-23-225)"]Show TOC collapsed on page load:
[oxy_toc collapsed=true]Show numbered list:
[oxy_toc tag="ol"]Do not show the title:
[oxy_toc title=""]Change the title from the default “Table Of Contents”:
[oxy_toc title="Page Navigation"]Add the following sample CSS and change colors as needed:
/* TOC toggle */
body .toc-list .collapsible {
background-color: #ccc;
}
/* TOC list */
body .toc-list ul[class].toc,
body .toc-list ol[class].toc {
background-color: #ddd;
}Before:
After:
