Are you looking to add a collapsible table of contents in Elementor? On a phone a long list of sections can fill the whole screen before the article even starts.
The Toggle switch in the Table Of Content widget turns the title into a button. Readers open the list when they want it and fold it away again when they do not, and you can decide whether it starts open or closed on each device.
To check the complete feature overview documentation of The Plus Addons for Elementor Table Of Content widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Table Of Content is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Table Of Content, switched on under The Plus Addons > Widgets.
- The page needs real headings: the widget does not create headings, it indexes the ones already on the page. Build the article with heading widgets (H2, H3, H4) before you judge the result.
- Keep the title: the toggle lives in the heading row, so Content must stay on and Title must not be empty.
Steps
- Add the Table Of Content widget and set up Layout and Select Tags as usual.
- Open Extra Options and switch Toggle on.
- Use Default On to say whether the list starts open. It is on to begin with, and it has its own value for desktop, tablet and mobile — a common setup is open on desktop and closed on mobile.
- Set the two icons on the Open and Close tabs. They start as a chevron pointing up and a chevron pointing down.
- Update the page and try it on the published version.
What You End Up With
The title becomes a button. When the list is folded away only the title row is left, with the close icon beside it.
Settings
| Setting | What it does | Default |
|---|---|---|
| Toggle | Turns the title into an open/close button. Only shown while Content is on. | Hide |
| Default On | Whether the list starts open. Separate values for desktop, tablet and mobile. | Show |
| Select Open Icon | Icon shown while the list is open | Chevron up |
| Select Close Icon | Icon shown while the list is closed | Chevron down |
How It Behaves
- Clicking anywhere on the title row opens or closes the list, with a short slide animation, and swaps the icon between the two you chose.
- Default On is read once, when the page loads, from the width of the browser window. The widget treats anything wider than 1200 px as desktop, 768 px to 1200 px as tablet and anything narrower as mobile — so a desktop window that is only 1100 px wide uses the tablet value.
- The state is not remembered between pages or visits: the list always starts in whatever Default On says for that screen width.
Limitations
- Clearing the Title removes the toggle. With no title there is no heading row, so nothing is drawn for the reader to click and the list is always open.
- The icons need Font Awesome. The open and close icons are Font Awesome icons, and The Plus Addons does not load Font Awesome by itself. On a page that has no other Font Awesome icon on it, the toggle icon is blank — the title row is still clickable, it just has no arrow.
- The window width is read on load only. Resizing the window does not re-apply Default On.
Troubleshooting
Nothing happens when I click the title
Check that Toggle is on and that Title still has text in it. The toggle is attached to the title row, so an empty title leaves nothing to click.
The list starts open on mobile even though I turned Default On off
Default On is set per device. Switch to the mobile view in the panel and turn it off there as well — and remember the widget counts anything under 768 px as mobile.
The open and close icons are invisible
Font Awesome is not loaded on that page. The arrows appear as soon as something else on the page brings Font Awesome in; until then the title row still opens and closes the list, it just has no arrow beside it.
I want the sub-items folded, not the whole list
That is Child Collapsed in the Layout section, not Toggle. See the settings overview.
