--- title: Table of Contents Widget Settings description: "Long posts are easier to read when visitors can see the whole shape up front and jump straight to the part they want. The [Table of Contents widget](https://master-addons.com/element/table-of-contents/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) reads the headings on your page and…" url: "https://master-addons.com/docs/addons/elementor-table-of-contents/" updated: "2026-11-02" category: Addons --- # Table of Contents Widget Settings Long posts are easier to read when visitors can see the whole shape up front and jump straight to the part they want. The [Table of Contents widget](https://master-addons.com/element/table-of-contents/) in [Master Addons for Elementor](https://master-addons.com/widgets-and-extensions/) 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. ![Elementor Table of Contents widget on a page, showing a numbered list of eleven headings under the title TOC](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114112/toc-07-toc-result.webp) ## 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](https://master-addons.com/docs/getting-started/installing-plugin/). - 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. ![Table of Contents widget in the Elementor Elements panel being dragged onto the page](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114038/toc-01-table-of-contents-widget.webp) ## 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. ![Table of Contents Content tab with Enter Title Text, List Style, Include and Exclude tabs, and Heading Tags set to H2, H3, and H4](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114044/toc-02-content-settings.webp) - **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. ![Table of Contents with Make Content Collapsible and Keep Collapsed Initially set to Yes, showing the list collapsed to three items with a toggle icon](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114055/toc-04-collapsible.webp) - **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. ![Table of Contents Scroll section with Scroll to Top set to Show, Offset, Size, Icon and Background Color, Smooth Scroll, and Scroll Animation Delay](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114049/toc-03-scroll.webp) - **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. - **Smooth Scroll, Scroll Animation Delay and Smooth Scroll Offset (px):** each jump scrolls smoothly and stops about 30 px above the heading. If the delay or offset values have no effect on your site, use the fixed header tip below. ## 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. ![Table of Contents Style tab with the Container section open, showing padding set to 40 pixels on all sides, next to the numbered list](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114101/toc-05-container-style.webp) - **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. ![Table of Contents Content style section with a Text Color picker open, showing the list links turned blue](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/07/01114107/toc-06-content-style.webp) - **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. - **Clear a fixed header.** If a fixed header covers headings after a jump, add `.elementor-heading-title[id] { padding-top: 90px; margin-top: -90px; }` in Appearance, Customize, Additional CSS. Each heading lands 90 px lower and looks the same. - **Make it sticky.** Put the widget in a sidebar column and add `selector { position: sticky; top: 32px; }` in Advanced, Custom CSS. The [Table of Contents product page](https://master-addons.com/element/table-of-contents/) walks through it. - **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 an Elementor widget, included in Master Addons, 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 smoothly to its section and stops about 30 px above the heading. 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](https://master-addons.com/element/table-of-contents/) page. For related widgets, see [Timeline](https://master-addons.com/element/timeline/) and [Nav Menu](https://master-addons.com/element/nav-menu/), browse the full [Master Addons widgets and extensions](https://master-addons.com/widgets-and-extensions/), and check the [pricing page](https://master-addons.com/pricing/) for what each plan includes.