---
title: "How to Create a Collapsible Table of Contents in WordPress?"
url: https://nexterwp.com/docs/create-a-collapsible-table-of-contents-in-wordpress/
date: 2024-12-03
modified: 2026-09-15
lang: en
author: "Aditya Sharma"
description: "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,..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Collapsible-Table-of-Contents-in-WordPress_-1024x519.jpg
word_count: 608
---

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

## Key Takeaways

- Nexter Blocks Table of Contents block creates a sticky, collapsible table of contents in the WordPress Block editor with toggle icons for open and closed states.
- Default On keeps the table of contents open by default, while disabling it keeps the TOC collapsed on mobile to preserve space above the fold.
- Progress Bar block pairs with the collapsible TOC to help readers track how far they have scrolled through the article.

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

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/)

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

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

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

![The List Type setting with UL and OL](https://nexterwp.com/wp-content/uploads/2026/09/toc-list-type.webp)

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

![The Table Title panel with Show Title](https://nexterwp.com/wp-content/uploads/2026/09/toc-title.webp)

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

![The Toggle Icon settings with the open and close icons and Default Open](https://nexterwp.com/wp-content/uploads/2026/09/toc-toggle-icon.webp)

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

- Set **Style** to **Style 1**.

- Switch **Child Collapsed** on.

![The Child Collapsed toggle with Style 1 selected](https://nexterwp.com/wp-content/uploads/2026/09/toc-collapsed.webp)

> ***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](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/)- [Sticky table of contents](https://nexterwp.com/docs/make-a-sticky-table-of-contents-in-wordpress/)- [Exclude a title from the list](https://nexterwp.com/docs/exclude-a-title-from-a-table-of-contents-in-wordpress/)

## Frequently Asked Questions

**Q: Why is my collapsible table of contents not showing up in WordPress?**
A: The usual blocker is that the Table of Contents block is part of Nexter Blocks, so it has to be installed and activated first. Nexter Blocks, from POSIMYTH Nexter, provides the Table of Contents block used in this tutorial. If the block is active but still missing, the page also points to the feature overview and live block page at [click here](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/) and [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-table-of-contents/).

**Q: Can I add a collapsible table of contents in Elementor?**
A: This tutorial starts with adding a table of contents in Elementor, so the workflow is meant for that setup. Nexter Blocks provides a Table of Contents widget that creates a sticky table of contents in WordPress, which is what makes the collapsible behavior possible here. The practical upside is easier navigation for readers on longer pages, especially when you want them to jump between sections without scrolling manually.

**Q: How do I keep the table of contents collapsed by default?**
A: Disable the Default On toggle. The page calls this out directly: Default On keeps the table of contents open by default, and turning it off keeps it collapsed by default. That matters because an expanded TOC takes up more space at the top of the page, while a collapsed one stays out of the way until someone opens it.

**Q: What settings control the open and closed icons on a collapsible table of contents?**
A: The Open and Close tabs handle separate icons for each state. That split matters because users need a clear visual cue for whether the table of contents is expanded or collapsed. The tutorial also says to enable the Toggle Icon toggle from the Table Title tab, and Show Title has to stay enabled or the title area will not appear as expected.

**Q: What do I need before creating a collapsible table of contents with Nexter Blocks?**
A: Nexter Blocks needs to be installed and activated before this works. The tutorial describes Nexter Blocks as part of Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Extension, Nexter Suite, and POSIMYTH Nexter, and it uses that block set to build the sticky table of contents. Without that active block package, there is nothing to add to the page.

**Q: What is the difference between a sticky table of contents and a collapsible one?**
A: A sticky table of contents stays available as readers move through the page, while a collapsible one can be opened or closed with a toggle. This tutorial uses the Table of Contents block from Nexter Blocks to create both behaviors together. The point is cleaner long-form content: readers get quick navigation when they need it, but the TOC does not have to stay expanded all the time.