Table of Contents
This element allows you to add a collapsible table of contents to your templates, which will automatically pick out the headings from your chosen container on the page. Works great for sticky tables of content in a sidebar, fixed or inline at the top of an article.
Note – if using Bricks’ experimental feature ‘Add Element ID & class as needed’, make sure to give the table of contents element a custom ID (changed by using the pencil icon next to the ID in the ID/class dropdown settings). This will ensure the element definitely has an ID, which is needed.
Content selector – Add the selector for the container of the content. eg ‘.content’ and then give the article content the class ‘content’.
Heading selectors – Choose which headers to pick out of the content for the table. Default is h2,h3,h4,h5
Ignore selectors – If you have some heading inside the content that you do not wish to be included in the table, give them a class and add that as an ignore selector.
Collapse depth – This controls how many levels of headings are collapsed by default. If you’re creating an inline table of contents, it’s best to set this to 0 to make sure none of the headings are collapsed. If you’re using sticky or fixed positioning and have a lot of content, it would be better to collapse some of them initially, so they only reveal as you scroll past those headings.
Remove heading – The table can be collapsed by clicking on the table heading. The heading is optional and can be removed.
Icon – Change the ‘down arrow’ icon and size. Initially the size is inherited from the font size of the header text.
Customise the typography of at each heading level, add indents and control the spacing between each of the list items.
If you’re not using the border style for the table of contents, you can set a number of columns for the lists to take up, which can be useful if using the table inline where you want the lists to take up more horizontal space.
Smooth scroll offset – If using a sticky header, adding an offset to the smooth scroll will make sure the headings are visible and readable when they’re scrolled to rather than being hidden underneath the header.
Add unique IDs to content headings – Instead of adding IDs to all headings inside your content, enabling this setting will do it for you and give each header found inside the content a unique ID.
ID prefix – By default, the IDs given to the headings are prefixed ‘heading-‘ and then the number from the ID of the table of contents component. Each heading is incremented to make sure they’re unique. As well as changing the ID of the component, you can also change the prefix to something more relevant to your content.
Counter / Border / Text
The three main layout types are to include counters, borders or just the text. The border makes sense for either a sticky or fixed positioned table of contents as the border will select on the currently active.
The counter is useful for creating more of an ordered list.
Suffix and separators can be added to the counters to make it easy to add context to the list. eg “Q1” “Q1a” Q2″. or “Part I” “Part II” “Part III” etc. (Make sure to include the quotes, eg “.”)
Clicking on the links in the table takes me to the top of the page instead of to the actual heading – It’ll be because the heading doesn’t have ID. This is common if the heading are inside post content, rather than being heading elements. Enable the setting ‘Add unique IDs to content headings‘ to solve.
Nothing is appearing inside my table of contents – It’s not finding the headings on the page. Make sure the content selector actually exists on the page. ie if you’re using ‘.content’, then the container around the headings (and the rest of the content) must have that class.