Expanded Table of Contents Collapse When Sticky
This page demonstrates how the Table of Contents automatically collapses when it becomes sticky, helping reduce visual space while maintaining easy access to page navigation.
Expanded Table of Contents Collapse When Sticky – Default Behavior
This example shows how the Table of Contents collapses into a compact view when it becomes sticky while scrolling. Clicking the header expands it again for full navigation.
Introduction
This is an example page used to demonstrate how the Divi Table of Contents Maker works. It includes multiple heading levels and enough content to show how the table of contents generates links automatically.
The goal of this content is to simulate a real article or documentation page with a clear structure.
Section One
This section represents a main content area on a typical page. It uses a primary heading that should appear as a top-level item in the table of contents.
Long pages often benefit from a clear structure. When content is broken into sections and subsections, users can quickly understand the page layout and navigate directly to what they need.
Subsection One
This subsection expands on the main topic and should appear nested under “Section One” in the table of contents.
Subsections help organize related ideas and make long-form content easier to scan. The table of contents should reflect this hierarchy automatically.
Subsection One A
This subsection demonstrates a deeper level of content hierarchy. It should appear nested under “Subsection One.”
Using multiple heading levels allows the table of contents to show clear relationships between topics, especially on documentation or feature-heavy pages.
Subsection One B
This subsection provides another related topic at the same level as Subsection One A.
When multiple sibling subsections exist, the table of contents groups them together, making navigation predictable and easy to follow.
Subsection One C
This is an additional subsection used to demonstrate how the table of contents handles multiple items within the same section.
This helps confirm that the table of contents updates dynamically as more headings are added to the page.
Automatic Detection
The Table of Contents module automatically detects headings without requiring manual links.
This subsection shows how multiple headings at the same level are grouped together under a single parent heading.
Section Two
This section includes more sample content so the table of contents has enough items to display and the page feels more realistic.
Long-form content often benefits the most from a table of contents, especially for blogs, documentation, tutorials, and knowledge base articles.
Subsection Two A
More sample text goes here. This helps demonstrate scrolling behavior and how the table of contents stays visible or updates based on the current section.
Subsection Two B
Supporting content can include lists or additional explanations:
- Bullet point one explaining a feature
- Bullet point two describing behavior
- Bullet point three providing context
Section Three
This section is used to show how deeper page structures appear in the table of contents.
Complex pages with many nested sections can quickly become hard to navigate without a clear structure.
Subsection Three A
This subsection demonstrates nested headings inside a main section.
Subsection Three A.1
This is a deeper heading level used to test how lower-level headings appear in the table of contents.
Section Four
This section adds more content to ensure the page is long enough for meaningful scrolling and testing of sticky or collapsible behavior.
Users can scroll up and down and use the table of contents to quickly move between distant sections.
Accordion Content Example
This accordion item contains a heading and supporting text. It demonstrates how structured content inside an accordion can still be organized logically within the page.
Feature
Accordion modules are often used to organize large amounts of content. This example shows how headings inside accordion panels relate to the overall page structure.
Usage
When using accordions, it’s important to understand which headings should appear in the Table of Contents and how collapsible content affects navigation and user experience.
Expanded Table of Contents Collapse When Sticky – Customized Settings
When the Table of Contents becomes sticky, it collapses into an icon to save space. This example changes the heading title and uses different icons for the open and closed states. It excludes H5 and H6 heading levels and hides specific headings using the CSS class "pac-dtocm-exclude".
This is useful when multiple TOC modules are used on the same page. By default, all headings are detected, but with the exclude class, specific headings (such as Section 1) can be hidden from a particular Table of Contents.
Project Overview
This section provides a broad summary of the topic and introduces the overall structure of the content. It sets expectations for the reader and establishes the main direction before diving into more detailed subsections. The goal is to create a logical hierarchy that the Table of Contents can automatically detect and organize. By structuring the page this way, users can clearly understand how each part connects to the bigger picture.
Background Context
Understanding the background helps explain why this topic matters and how it evolved over time. This subsection provides supporting information that connects the overview to more specific objectives and implementation details. It ensures readers are not jumping into isolated content without context. A clear background also makes the hierarchy of headings feel purposeful rather than random.
Initial Objectives
The initial objectives define what the project aims to accomplish and what success looks like. Clear goals ensure alignment between planning and execution while reducing confusion during later stages. Each objective should be measurable and relevant to the overall vision. When structured properly, these headings demonstrate how the Table of Contents groups related topics under a shared parent.
Key Milestones
Milestones represent measurable progress points within the overall plan and timeline. They break larger goals into manageable steps and help track advancement over time. Each milestone builds momentum toward the final outcome and provides clarity for decision making. This level also shows how deeper heading levels appear visually nested inside the Table of Contents.
Phase One Details
Phase one focuses on foundational tasks and early execution steps that shape the rest of the project. These tasks often involve setup, configuration, and initial testing. Even though this is a deeper heading level, it still plays an important role in the content hierarchy. This demonstrates how the Table of Contents handles extended depth without losing structure.
Final Structural Summary
A final structural summary reinforces the key ideas presented throughout the section. It allows readers to quickly review the main points without rereading everything.
This deeper heading level demonstrates how extended hierarchies are handled within the Table of Contents module. Even at H6, the structure remains organized and clearly nested.
Development Process
This section explains how ideas move from planning to execution in a structured and repeatable way. It highlights the approach required to ensure consistency, stability, and scalability. Breaking the process into smaller parts makes complex systems easier to understand. The Table of Contents helps readers quickly jump between these stages without scrolling endlessly.
Planning and Preparation
Proper planning reduces unexpected issues during implementation and improves overall efficiency. This subsection outlines research, scheduling, and coordination efforts that take place before development begins. Clear preparation minimizes risk and ensures smoother transitions between phases. It also reinforces how mid level headings are grouped under the main section in the TOC.
Technical Setup
Technical setup includes configuring systems, tools, and workflows necessary for smooth operation.
- Configuration Adjustments
- Testing and Validation
- Preparation
Optimization and Refinement
Once the system is operational, optimization improves performance and user experience. This section focuses on enhancing quality, responsiveness, and long term reliability. Refinement ensures that the structure remains clean and adaptable over time. It also creates more depth in the content for testing TOC behavior such as sticky or collapsible settings.
Performance Monitoring
Monitoring helps identify bottlenecks and inefficiencies that may not be obvious at first glance. It provides data driven insights that guide future improvements.
User Feedback Analysis
User feedback reveals real world behavior patterns that data alone may not capture. Analyzing this information helps prioritize updates and improve usability. Structured feedback loops create a continuous improvement cycle. This level further demonstrates nested grouping inside the TOC.
Content Organization Principles
Effective organization begins with logical grouping of related ideas under clear headings. Each subsection should support the parent section while contributing unique value. Consistent formatting and spacing make the hierarchy visually clear for readers. The Table of Contents reflects this organization automatically, helping users jump directly to relevant topics.
Structured Information Flow
Information should move from general concepts to more detailed explanations in a natural progression. This layered approach prevents confusion and ensures readers understand the foundation before diving deeper. Clear transitions between headings make the experience smoother and more professional. In the TOC, this structure appears as a clean nested layout that mirrors the content hierarchy.
Supporting Examples and Visuals
Examples, images, or additional elements can strengthen explanations and improve clarity. Visual breaks also make long sections easier to scan without losing engagement. When structured under proper heading levels, these supporting elements remain logically grouped.
Long Form Content Strategy
Long form content requires clear structure to remain readable and easy to navigate. Without organized headings, users may feel overwhelmed and abandon the page before reaching important sections. A well structured layout combined with a Table of Contents improves usability and encourages deeper engagement. This section is intentionally longer to simulate real documentation or blog content where navigation becomes essential.
Note: This demo uses real page content so you can test how the table of contents links and navigates between sections.