---
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-08-20
author: "Aditya Sharma"
description: "Do you want your readers to skim a long article without scrolling past every section? A collapsible table of contents keeps the outline compact by default and expands only when..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Collapsible-Table-of-Contents-in-WordPress_-1024x519.jpg
word_count: 468
---

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

Do you want your readers to skim a long article without scrolling past every section? A collapsible table of contents keeps the outline compact by default and expands only when a reader taps it, which saves space at the top of the post on mobile.

The Table of Contents block in [Nexter Blocks](https://nexterwp.com/nexter-blocks/) lets you build a sticky, collapsible table of contents in the WordPress Block editor, with toggle icons for the open and closed states and a default state you control.

To check the complete feature overview documentation of the Nexter Blocks Table of Contents block, [click here](https://nexterwp.com/docs/add-a-table-of-contents-in-wordpress/).

**Best Used For:**

- Long-form blog posts and knowledge base articles where readers need to jump between sections without scrolling.

- Mobile-first sites where a static TOC would push the first paragraph below the fold on small screens.

- Landing pages with multiple product feature sections where visitors want a quick outline before reading.

***Requirement  - This block is a part of the Nexter Blocks. Make sure it is installed and activated to use it.***

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

To do this, add the Table of Contents block to the page and follow the steps below.

1. Select the type and style you want to use from the **Layout** tab. Use this when you want to match the collapsible table of contents style to the surrounding page design, such as a compact inline outline versus a floating sticky panel.

2. Go to the **Table Title** tab and enable the **Toggle Icon** toggle. This is what turns a standard table of contents into a collapsible one, adding the click target readers use to expand and collapse the outline.

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-toggle-icon.gif)

> *Note: Make sure the **Show Title** toggle is enabled, since the toggle icon sits next to the title.*

From the **Open** and **Close** tabs, you can pick separate icons for the open and closed states. Use a downward arrow for the open state and an upward arrow for the closed state, so readers can tell at a glance whether the TOC is currently expanded.

Enable the **Default On** toggle to keep the table of contents open by default when the page loads. This is useful on long-form articles where you want readers to see the full outline right away.

> *Note: To keep the table of contents collapsed by default, disable the ****Default On**** toggle. This works well on mobile, where a collapsed TOC keeps the article visible above the fold.*

Your Gutenberg WordPress page will now show a collapsible table of contents that readers can expand and collapse from the toggle icon. To help readers track how far they have scrolled through the article alongside the TOC, pair it with the [Progress Bar block](https://nexterwp.com/docs/add-a-progress-bar-in-wordpress/). If you also want a fixed section-based navigation for a one-page layout, see [How to Create One Page Scroll Navigation in WordPress](https://nexterwp.com/docs/create-one-page-scroll-navigation-in-wordpress/).

![](https://nexterwp.com/wp-content/uploads/2024/12/tableofcontent-collapse-demo-2.gif)

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