Components Demo

Expandables & Tabs

Create interactive, organized content for ACME Company with expandable sections and tabbed interfaces using Documentation.AI's interactive components.

Organize content efficiently with collapsible sections and tabbed interfaces. These components help reduce cognitive load while keeping detailed information easily accessible.

Basic Expandables

Single expandable sections

Use expandables to hide detailed information until needed:

<Expandable title="What is Your SaaS Product?" default-open="false">
Your SaaS Product is a comprehensive collaboration platform designed for modern teams...
</Expandable>

<Expandable title="How does pricing work?" default-open="false">
We offer transparent, per-user pricing with no hidden fees...
</Expandable>

Expandables with default open state

Start important sections expanded to draw immediate attention:

Immediate action required: We've identified a security vulnerability in API versions prior to v2.1.0.

What happened: A potential authentication bypass was discovered that could allow unauthorized access to user data under specific conditions.

Impact: Less than 0.1% of users were potentially affected. No evidence of exploitation has been found.

Action required:

Update immediately to API version 2.1.0 or later
Rotate your API keys as a precautionary measure
Review access logs for any suspicious activity

Timeline: This vulnerability was patched on March 1, 2024. All hosted instances have been automatically updated.

View detailed security advisory →

Get up and running in 10 minutes:

Create account - Sign up here
Verify email - Check your inbox for confirmation
Complete profile - Add your name and company info
Create workspace - Set up your team's home base
Invite team members - Add colleagues via email
Start first project - Use our template or start from scratch
Connect tools - Link Slack, GitHub, or other services
Complete tutorial - 5-minute guided walkthrough

Need help? Contact support or schedule a demo call.

<Expandable title="🚨 Important Security Notice" default-open="true">
**Immediate action required**: We've identified a security vulnerability...
</Expandable>

ExpandableGroup

Organized FAQ sections

Group related expandables for better organization:

Step-by-step tutorials

Break complex processes into manageable sections:

Install required software:

Node.js 16+ - Download from nodejs.org
Git - Download from git-scm.com
Code editor - We recommend VS Code

Verify installation:

node --version  # Should show v16.0.0 or higher
git --version   # Should show git version info

Optional but recommended:

Install the "Documentation.AI" VS Code extension for syntax highlighting

Configure git with your name and email:

git config --global user.name "Your Name"
git config --global user.email "your.email@acme.com"

Advanced Expandable Patterns

Troubleshooting guides

Organize solutions by symptom or error type:

Feature documentation with examples

Combine explanations with live examples:

Best Practices

Content organization strategy

Logical grouping:

Group related topics together in ExpandableGroups
Use descriptive titles that clearly indicate what's inside
Order items from most common to least common
Consider your users' mental model and workflow

Progressive disclosure:

Start with essential information visible
Use default-open="true" sparingly for critical items
Hide advanced or detailed information in expandables
Provide clear section previews in titles

Writing effective expandable titles

Good title examples:

✅ "How do I reset my password?" (clear question)
✅ "Setting up GitHub integration" (specific task)
✅ "Troubleshooting login errors" (clear scope)
✅ "API rate limits and quotas" (specific topic)

Poor title examples:

❌ "More information" (vague)
❌ "Click here" (non-descriptive)
❌ "Advanced" (unclear what's advanced)
❌ "Other stuff" (meaningless)

When to use expandables vs. separate pages

Use expandables for:

FAQ sections with short answers
Optional details that supplement main content
Step-by-step processes with logical breaks
Troubleshooting guides with multiple solutions
Supplementary information that not everyone needs

Use separate pages for:

Complete topics that deserve dedicated space
Content that needs its own URL for linking/bookmarking
Long-form guides or tutorials
Content that forms part of a logical navigation flow
Information that needs to rank in search results

Accessibility consideration: Expandable components are fully keyboard accessible and work with screen readers. The expand/collapse state is announced to assistive technologies.

API Reference - Explore our comprehensive API documentation
Best Practices - Learn how to use components effectively
Configuration Guide - Set up advanced features and automation
Getting Started - Review the fundamentals if needed

AI Assistant