Download The Child-Theme

Table of Contents in Bricks Builder without any Plugin

Table of Contents

Example

The TOC-Element in all Tutorials comes from that code. So I didn’t include another one here.

Video Walkthrough

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

Add a Container

All you need to do is adding a Container and assign a specific ID to it.

Skip Elements

You can exclude elements from the TOC by assigning them a class of .wcd_tableOfContents_skip. In my Example I don’t want that Heading “Table of Content” be included in the list of Headings because it acts as a Heading for the TOC itself.

Enqueue & Initialize the TOC

That’s it. Now you just need to enqueue the files and set the options to what you need. A list of the available options can be found below:

wp_enqueue_style(‘wcd_toc_css’) is only needed if you don’t want to style the TOC yourself. You can also use the predefined classes. You can look them up in the shipped CSS file!

<?php

wp_enqueue_script('wcd_toc_js');
//CSS is only needed if you don't want to style the TOC yourself!
wp_enqueue_style('wcd_toc_css');

add_action('wp_footer', function() {
  ?>

<script>
  const myTOC = new WCD_toc({
    target : '#myTOC',
    taglist : [ 'h1', 'h2', 'h3', 'h4' ],
    highlight : [ 'h2', 'h3' ],
  });
  
  
</script>

<?php  
  
}, 99);
?>

Options & Parameter to adapt

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:
Option Name Type Default Value Note
targetString-

Pass the ID of your TOC-Container.

taglistArray-

Pass an Array of HTML-Tags you want to show up in the TOC-Element. For Example: ['h2','h3','h4'] or ['a']

highlightArray-

If you use that option the "scrolltrigger" feature get's activated by default. Pass a List of Tags you want to Highlight, for example: ['h2','h3']. With that option you could have a list (defined from taglist option) from h2 to h6 but only want to highlight certain elements when they are in position!

Full Source Code

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/toc/wcd_toc.js
Hosted with ❤️ by Github, created with bricks
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/toc/wcd_toc.css
Hosted with ❤️ by Github, created with bricks