How to Create a Collapsible Table of Contents in WordPress?

On a phone, a table of contents for a fifteen-section article can push the article itself off screen.

A collapsible list shows only its title until the reader taps it, which keeps the top of the post for the post.

For every Table of Contents setting in one place, see the Table of Contents block guide.

Before You Start

• Edition: Pro — the Table of Contents block is part of Nexter Blocks Pro.
• Block to enable: Table of Contents, switched on under Nexter > Blocks in your WordPress dashboard.
• Real headings on the page: the list is built from your H1–H6 blocks, so text that only looks like a heading will not appear.

Steps

1. Add the Table of Contents block to your post or page and click Design from Scratch.

2. In the Layout panel, pick a List Type — UL for bullets or OL for numbers — and a Style.

3. Open the Table Title panel and make sure Show Title is on — the title is what the reader taps.

4. Switch Toggle Icon on, then choose the Open and Close icons and whether the list starts open on each screen size.

5. Publish, then tap the title on a phone to check it folds.

Hiding Sub-Headings Instead

Child Collapsed, in the Layout panel, is a different kind of folding: it keeps sub-headings hidden until the reader reaches that section, so the list stays short without the reader having to do anything.

1. Set Style to Style 1.

2. Switch Child Collapsed on.

Child Collapsed only has an effect on Style 1. On None and on Styles 2, 3 and 4 the sub-items stay visible whether it is on or off — measured on the front end across all five styles.

How It Behaves

• Toggle Icon folds the whole list. Clicking the title hides everything below it and swaps the icon; clicking again brings it back.
• The starting state is set per screen size. Out of the box the list starts open on desktops and tablets and closed on phones — confirmed at 390 pixels wide, where the list was hidden on load.
• Child Collapsed folds only the sub-headings, and only for sections the reader has not reached yet. The section they are currently reading stays open.
• The two can be used together: a list that starts closed on phones, and shows only top-level headings when it is opened.

Limitations

• Pro only.
• Toggle Icon needs Show Title on. With no title there is nothing to tap.
• Child Collapsed is Style 1 only (above). If you need a different look and collapsing sub-headings, restyle Style 1 from the Style tab rather than switching style.
• A list that starts closed hides your section names from the reader on arrival, which is the trade for the space it saves.
• One per page. With two Table of Contents blocks on the same page only the first one is filled in — the second stays empty. This was measured on the front end.

Troubleshooting

There is no toggle icon

Show Title is off. The toggle sits beside the title, so the title has to be there.

Tapping the title does nothing

Toggle Icon is off — the title alone is not a button. Switch it on in the Table Title panel.

Child Collapsed does not hide anything

The Style is not Style 1. That is the only style where the setting has any effect.

It starts closed on desktop and I want it open

The default open state is set separately for each screen size next to the toggle icons. Switch it on for the desktop size.

Related Docs

• Table of Contents block: all settings
• Sticky table of contents
• Exclude a title from the list