---
title: "How to Create a Collapsible Table of Contents in Elementor?"
url: https://theplusaddons.com/docs/create-a-collapsible-table-of-contents-in-elementor/
date: 2025-01-11
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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...."
word_count: 778
---

# How to Create a Collapsible Table of Contents in Elementor?

## 

- Table Of Content en The Plus Addons for Elementor Pro convierte el título en un botón con Toggle, y la lista puede empezar abierta o cerrada por separado en escritorio, tablet y móvil.
- The Plus Addons for Elementor Table Of Content solo funciona con Pro activado, y el widget no aparece en el editor si el plugin Pro está desactivado.
- El widget indexa encabezados reales de la página, como H2, H3 y H4, y no crea headings nuevos; además, Content debe seguir activado y Title no puede estar vacío.
- Default On se lee al cargar la página según el ancho del navegador: más de 1200 px cuenta como escritorio, de 768 px a 1200 px como tablet y menos de 768 px como móvil.

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](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/table-of-contents/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## 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.

![Extra Options section with the Toggle switch turned on and outlined in the panel](https://theplusaddons.com/wp-content/uploads/2026/09/toc-toggle.webp)

- 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.

![Default On switch outlined under Toggle, with its device icons showing](https://theplusaddons.com/wp-content/uploads/2026/09/toc-toggle-default.webp)

- Set the two icons on the **Open** and **Close** tabs. They start as a chevron pointing up and a chevron pointing down.

![Open tab of the toggle icons with Select Open Icon outlined](https://theplusaddons.com/wp-content/uploads/2026/09/toc-toggle-icons.webp)

- 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.

![Published page: the table of contents folded away to its title row while the article is fully visible beside it](https://theplusaddons.com/wp-content/uploads/2026/09/toc-result-toggle-closed.webp)

## 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](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/).

## Related Docs

- [How to Add a Table of Contents in Elementor?](https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/)- [How to Make a Sticky Table of Contents in Elementor?](https://theplusaddons.com/docs/make-a-sticky-table-of-contents-in-elementor/)- [How to Add Smooth Scrolling Effect to Elementor Table of Contents?](https://theplusaddons.com/docs/add-smooth-scrolling-effect-to-elementor-table-of-contents/)

## Frequently Asked Questions

**Q: Why does the table of contents stay open on mobile even when Default On is off?**
A: Default On is stored separately for desktop, tablet, and mobile, so the mobile value can still be different from the others. The widget also reads that state once when the page loads, using the browser width at that moment. Anything under 768 px counts as mobile, so a desktop-sized window that is narrower than expected can trigger the mobile setting instead.

**Q: What do I need before a collapsible table of contents will work in Elementor?**
A: The widget needs real headings already on the page because it indexes existing H2, H3, and H4 headings instead of creating them. It also needs Content turned on and a non-empty Title, since the toggle lives in the heading row. The Plus Addons for Elementor Pro, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this Table Of Content widget as part of its Pro edition.

**Q: Why does nothing happen when I click the table of contents title?**
A: The click target is the title row itself, so an empty Title leaves nothing to open or close. Toggle also has to be on, because that switch turns the title into a button. When both are set correctly, clicking anywhere on the title row opens or closes the list with a short slide animation.

**Q: How do I hide only the sub-items instead of collapsing the whole table of contents?**
A: That behavior is controlled by Child Collapsed in the Layout section, not by Toggle. Toggle collapses the entire list behind the title row, while Child Collapsed folds just nested items. If you want a compact outline with top-level entries visible, Child Collapsed is the setting that matches that goal.

**Q: Why are the open and close icons blank in my table of contents?**
A: The icons are Font Awesome icons, and The Plus Addons does not load Font Awesome by itself. If nothing else on that page brings Font Awesome in, the title row still works but no arrow appears beside it. That means the collapse behavior can still function even when the icon area looks empty.

**Q: What is the best setup for a collapsible table of contents on desktop and mobile?**
A: A common setup is open on desktop and closed on mobile. Default On has separate values for desktop, tablet, and mobile, so you can keep long article navigation visible on larger screens without taking over a phone screen. The widget treats anything wider than 1200 px as desktop, 768 px to 1200 px as tablet, and anything narrower as mobile.