Long posts are easier to read when visitors can see the whole shape up front and jump straight to the part they want. The free Table of Contents widget in Master Addons for Elementor reads the headings on your page and turns them into a linked index. No manual list to build, and none to keep in sync later.
You drop the widget in, pick which heading levels to include, and it fills itself. From there you can make it collapsible, add a scroll-to-top button, and style the whole thing. This guide covers every setting in the widget.
What the Table of Contents widget does #
The widget scans the page for headings and builds a nested list of links from them. Each item points at its heading, so a click jumps down to that section. Add a heading later and the list picks it up on its own, which is the part that saves the most time.
Two tabs run it. Content holds the title, the heading levels, the collapsible option, and the scroll behavior. Style controls the container padding, the title, the separator, and the list items. The usual Elementor Advanced options sit alongside them.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- A page or post with real headings (H2, H3, and so on) for the widget to read.
How to add the Table of Contents widget #
In the Elementor editor, open the Elements panel and search for Table of Contents, or scroll to the Master Addons section (the widgets carry a purple MA badge). Drag it to the top of your content, or into a sidebar, and it fills itself from the page’s headings right away.
Set the title and which headings to include #
Open the Content tab and the Table of Contents section. This is where you name the box, choose the list style, and pick which heading levels show up.
- Enter Title Text: the heading above the list, like Table of Contents or TOC.
- List Style: Default (no marker), Bullets, or Numbers.
- Include / Exclude: the Include tab holds Heading Tags, and the Exclude tab explains how to leave single headings out.
- Heading Tags: pick the levels to pull in, such as H2 and H3. Add or remove tags to control how deep the list goes.
Want to skip a single heading? Add the jltma-toc-hide-heading class to that heading’s Advanced tab, in the CSS Classes field, and the widget leaves it out. Handy when one section heading would just clutter the list.
Make the list collapsible #
The Collapsible options let visitors fold the list down to just the title. That helps on mobile, or in a sidebar where space is tight.
- Make Content Collapsible: add a toggle so the list opens and closes.
- Keep Collapsed Initially: load it closed so it only shows the title until clicked.
- Icon Size and Color: the look of the collapse toggle.
Set up the scroll behavior #
Open the Scroll section for how the page moves when someone uses the index. You can add a back-to-top button and turn on smooth scrolling.
- Scroll to Top: add a fixed arrow in the bottom right corner. It appears once a visitor scrolls down and takes them back to the table of contents.
- Scroll to Top Offset: a scroll position to send readers to instead of the table of contents.
- Scroll Animation Delay and Smooth Scroll: the delay sets how long the scroll takes (500 ms by default). Turning on Smooth Scroll adds Smooth Scroll Offset (px), which stops short of the heading so a fixed header does not cover it.
Style the container and title #
Open the Style tab. The Container section sets the padding around the whole box, and the Title section styles the heading above the list.
- Container: padding for the box. Add a background, border, or radius from the Advanced tab.
- Title: alignment, color, typography, and bottom spacing for the heading.
- Separator: style, color, thickness, and bottom spacing for the line under the title. The scroll to top arrow is styled in the Scroll section.
Style the list items #
The Content section in the Style tab handles the links themselves. You get typography, spacing between items, and separate colors for the Normal, Hover, and Active states.
- Typography and Spacing: the font and the gap between rows.
- Normal / Hover / Active: a color for each state. Active applies to the item a reader last clicked.
- Text Color: the link color for the state you have selected.
Common use cases #
- Long tutorials and guides giving readers a map and quick jumps.
- Documentation pages where every heading is a section people search for.
- Sidebars with a collapsible index beside the article.
- Roundups and listicles so visitors can skip to the entry they want.
- Legal and policy pages that need clear anchors to each clause.
Tips for working with the Table of Contents widget #
- Use a clean heading structure. The list is only as good as your H2s and H3s, so write headings that read well on their own.
- Include just two levels. H2 and H3 usually make a tidy index. Pull in H4 and beyond and it starts to get noisy.
- Collapse it on mobile. Keep Collapsed Initially saves a lot of scrolling on small screens.
- Turn on smooth scroll. A glide to the section reads better than a hard jump, and the offset keeps headings clear of a sticky header.
- Skip stray headings. Use the jltma-toc-hide-heading class on headings you do not want in the list, like a CTA or a sidebar title.
Frequently Asked Questions #
What is the Table of Contents widget in Master Addons?
It is a free Elementor widget that reads the headings on your page and builds a linked index from them automatically. Each item jumps to its section on click, and you control which heading levels appear, whether the list collapses, and how it looks, all from the Elementor panel.
How does the widget know which headings to list?
You pick the heading tags in the Content tab, like H2 and H3, and the widget lists every matching heading on the page. To skip a whole level, leave that tag out. To drop one specific heading, add the jltma-toc-hide-heading class to it in the Advanced tab.
Can I make the table of contents collapsible?
Yes. The Collapsible options add a toggle so visitors can fold the list to just the title. Turn on Keep Collapsed Initially to load it closed, which works well in a sidebar or on mobile where you want to save vertical space.
Does it update when I add new headings?
Yes. The list is generated from the page’s headings, so when you add, remove, or rename a heading, the table of contents reflects the change. There is no manual list to keep in sync, which is the main reason to use the widget over a hand-built one.
Can I add a smooth scroll and a back-to-top button?
Yes. Clicking an item scrolls to its section, and Scroll Animation Delay sets how long that takes. Smooth Scroll adds an offset for fixed headers. Scroll to Top adds an arrow in the bottom right corner with its own offset, size, and colors.
Wrapping up #
The Table of Contents widget turns your headings into a linked index without any manual upkeep: drop it in, pick the heading levels, make it collapsible, set the scroll behavior, then style it to match. For an overview and a comparison with Elementor Pro, see the Elementor Table of Contents widget page. For related widgets, see Timeline and Nav Menu, browse the full Master Addons widgets and extensions, and check the pricing page for what each plan includes.
