Live Demo: All New Features Combined
The TOC below demonstrates multiple v2.3.0 features:
- ✅ Starts collapsed (
default-state="collapsed") - ✅ Remembers your choice (
remember-state="true") - ✅ Only shows H2 and H3 (
levels="2,3") - ✅ Uses custom class for styling (
class="smart-toc") - ✅ Uses numbered list (
list-style="numbers") - ✅ Excludes "About This Demo" section (
exclude="about-demo")
About This Demo
This section is excluded from the TOC using exclude="about-demo". Notice it doesn't appear in the table of contents above, even though it's an H2 heading.
State Management Features
Version 2.3.0 introduces powerful state management capabilities.
Default State Control
You can now control whether the TOC starts collapsed or expanded using the default-state attribute.
Persistent State
With remember-state="true", the TOC remembers the user's preference across page loads using localStorage.
Try it: Collapse or expand the TOC above, then refresh this page. Your choice is remembered!
Content Filtering
Take control of what appears in your TOC with new filtering options.
Heading Level Filter
Use the levels attribute to specify which heading levels to include. For example, levels="2,3" shows only H2 and H3 headings.
This demo's TOC uses this feature - notice there are no H4 headings in the TOC.
This H4 Won't Appear
Because levels="2,3" is set, this H4 heading is filtered out.
Exclude Specific Headings
Sometimes you have headings you don't want in the TOC. Use exclude="id1,id2" to skip them by ID.
The "About This Demo" section above is excluded using this feature.
Visual Customization
New options for controlling how your TOC looks and behaves.
Custom CSS Classes
The class attribute lets you add custom CSS classes to the TOC container. This demo uses class="smart-toc" with custom styling.
List Style Options
Choose from three list styles:
list-style="bullets"- Default bullet pointslist-style="numbers"- Numbered list (used in this demo)list-style="none"- No markers
Code Quality Improvements
Behind the scenes, v2.3.0 includes major refactoring for better maintainability.
Refactored Methods
The codebase has been reorganized into smaller, focused methods for easier maintenance and testing.
Comprehensive Documentation
All methods now include JSDoc comments with parameter types and descriptions.
Backward Compatibility
All existing features from v2.2.0 and earlier still work exactly as before. The new attributes are optional enhancements.
Migration Guide
If you're upgrading from v2.2.0 or earlier:
- Simply replace the script in Code Injection
- Your existing
<toc>tags continue to work - Add new attributes as needed
More Examples
Check out the other example files to see different configurations in action.
Getting Help
If you encounter any issues or have questions about the new features, check the documentation or open an issue on GitHub.
Documentation
Full documentation is available in the repository:
- README.md - Overview and all configuration options
- CUSTOMIZATION.md - Styling and customization guide
- QUICK-START.md - Get started in 5 minutes
Community Support
Join the discussion on the Ghost Forum or GitHub to share your configurations and get help from other users.