Table of contents

Wrapping your post content in toc shortcode will create an automatic Table of Contents menu based on the headers with ID attributes contained in the content. The ID-s should be unique to make the menu functional.
The menu supports 2 levels of hierarchy: parent and children. Hierarchy can be indicated by using tag names h1-h5 or size classes: huge, large, (medium), small, tiny.

Toc shortcode arguments
titleTitle above TOC menu (default: "Table of contents").
headerCustom classes for the title header (default: "small center aligned").
classesCustom classes for the menu (default: "vertical").
containerCustom classes for the menu container segment (default: "basic padded right floated").
smoothSmooth scrolling to anchor links (default: "true").
Table of contents
The first header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The second header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The third header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

The fourth header

Lorem ipsum dolor sit amet, dolor maiorum ius ei, sea omnesque verterem ne. Facer decore theophrastus ne est, ea vim quot fierent eloquentiam, in reque porro mei. Ex legere laoreet scripserit ius, partem soluta timeam eu vim. Te mea congue aperiam, at mei diceret dolorum molestiae. Placerat complectitur vim ex.

<toc>
  <header id="first">The first header</header>
  ...
  <header id="second">The second header</header>
  ...
  <header id="third">The third header</header>
  ...
  <header>The fourth header</header>
  ...
</toc>
Notes
Notice the header without an ID attribute is not included.
Hierarchy

H1 Parent

H2 Child

H3 Child

H2 Child

Huge Parent
Large Child
Medium Child
Small Child

H2 Child

H1 Parent

H2 Child

<toc>
  <header tag="h1" id="demo">H1 Parent</header>
  <header tag="h2" id="demo">H2 Child</header>
  <header tag="h3" id="demo">H3 Child</header>
  <header tag="h2" id="demo">H2 Child</header>
  <header huge id="demo">Huge Parent</header>
  <header large id="demo">Large Child</header>
  <header id="demo">Medium Child</header>
  <header small id="demo">Small Child</header>
  <header tag="h2" id="demo">H2 Child</header>
  <header small tag="h1" id="demo">H1 Parent</header>
  <header huge tag="h2" id="demo">H2 Child</header>
</toc>
Notes
H1 is equal to 'huge', tag name takes priority.
Styling
Table of contents
Header
Header
Header
<toc small vertical secondary pointing>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
</toc>
Notes
Add menu classes directly to toc.
Shortcode demo
Table of contents
Header
Header
Header
<toc horizontal header="left aligned dividing" container="basic">
  <header id="demo">Header</header>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
</toc>
Shortcode demo
Header
Header
Header
<toc horizontal three item stackable title="" container="basic text container">
  <header id="demo">Header</header>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
</toc>
Shortcode demo
Article contents
Header
Header
Header
<toc vertical inverted text title="Article contents" header="tiny left aligned" container="small left floated inverted">
  <header id="demo">Header</header>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
</toc>
Shortcode demo
Header
Header
Header
Header
Header
<toc vertical bottom attached header="top attached block" container="basic right floated very padded">
  <header id="demo">Header</header>
  <header small id="demo">Header</header>
  <header small id="demo">Header</header>
  <header id="demo">Header</header>
  <header id="demo">Header</header>
</toc>

Leave a comment

Your email address will not be published. Required fields are marked *