Table of Contents

The Table of Contents element automatically generates its contents based on the hierarchy of heading tags from your chosen container on the page. You can also make the collapsible TOC list with the help of the inbuilt Zion Builder Accordion element.

If you write long content, adding a table of contents helps both search engines and visitors navigate & understand your content.

If you use this element with the Theme Builder, you can automatically add a table of contents to all your content. When a guest user clicks on a link in the table of contents list, it acts as an anchor and takes them to that section on the page(it has a smooth scrolling effect).

Note: On Builder editor, you will not get the original TOC list. A static demo list will show there. When you will check the frontend, it will generate the original list based on your content.

Activate The Element

At first, you will activate the Table of Contents element after activating your license key. You will go to your Dashboard -> Zion Builder -> ZiUltimate page. Under the General Elements tab, you will get the elements list. Select the Table of Contents element’s checkbox and save the settings. Now Table of Contents element is ready for use.

How To use

Please go through the video and understand the settings.

Making Sticky

You can make it sticky also.

1. Click on Styling Tab
2. Click on Wrapper
3. Click on Display under Wrapper style
4. Go to position section and set it “sticky”
5. Later you can adjust the position top if you have sticky header bar

Creating Toggle Button

We shall use Zion’s inbuilt Accordions element for the toggle button. Follow the steps below(see the tree view screenshot also):

1. Add the Accordions element
2. Add the Table of Contents element inside the accordion item element
3. Adjust the design