Progressive Disclosure Examples

This page provides live examples of Docusaurus' native progressive disclosure components in action. Use these examples as references when creating your own documentation.

Global Experience Settings

You can control your documentation experience level using the settings panel below:

Documentation Experience Settings

Details/Summary Examples

Basic Usage

What is progressive disclosure?

Progressive disclosure is an interaction design technique where only necessary or requested information is displayed at first, with additional details shown on request. This helps manage complexity and prevents information overload.

By hiding less important information, you can:

• Reduce cognitive load for beginners
• Create cleaner, more approachable documentation
• Allow experienced users to access detailed information when needed

With Markdown Formatting

How to format content inside details/summary

You can use all standard Markdown formatting inside a details element:

Bold text and italic text work normally.

Headings are supported

• Bulleted lists
• Work as expected

1. Numbered lists
2. Also work properly

Tables	Work Too
Data 1	Data 2
Data 3	Data 4

Blockquotes are supported

// Code blocks work too
function example() {
  return "Hello world";
}

Nested Details

System Requirements

These are the base system requirements for running RallyPoynt OS:

• CPU: 2.0 GHz dual-core processor or better
• RAM: 4 GB minimum, 8 GB recommended
• Storage: 20 GB available space

Advanced Requirements

For development environments or high-traffic deployments:

• CPU: 3.0 GHz quad-core processor or better
• RAM: 16 GB minimum
• Storage: 40 GB SSD
• Network: 100 Mbps connection

Admonition Examples

Standard Admonitions

This is a standard note admonition. Use it for general information.

This is a tip admonition. Use it for helpful advice and best practices.

This is an info admonition. Use it for important information that users should know.

This is a caution admonition. Use it when the user should proceed carefully.

This is a danger admonition. Use it to warn about potentially harmful actions.

Collapsible Admonitions

This is a collapsible note admonition. The content is hidden by default.

You can include multiple paragraphs and all Markdown formatting.

This is a collapsible tip with formatting

• Item one
• Item two
• Item three

// Even code blocks work
function hello() {
  return "world";
}

Nested Admonitions

Important Information

This is the outer admonition.

This is a nested admonition inside the info admonition.

Be careful when nesting admonitions - don't go too deep!

Remember to close all your admonitions. :::

Tabs Examples

Basic Tabs

Apple

This is an apple 🍎

Apples are crisp, round fruits with red, green, or yellow skin.

Orange

This is an orange 🍊

Oranges are juicy citrus fruits with bright orange skin.

Banana

This is a banana 🍌

Bananas are long, curved fruits with yellow skin when ripe.

Language-Specific Tabs

JavaScript

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

Python

def greet(name):
    return f"Hello, {name}!"
    
print(greet("World"))

Java

public class Greeter {
    public static String greet(String name) {
        return "Hello, " + name + "!";
    }
    
    public static void main(String[] args) {
        System.out.println(greet("World"));
    }
}

Synchronized Tabs

These tab groups share the same groupId, so selecting a tab in one group will synchronize the selection in the other group.

Windows

This is Windows-specific content.

macOS

This is macOS-specific content.

Linux

This is Linux-specific content.

More content in between...

Windows

More Windows-specific instructions.

echo Hello from Windows

macOS

More macOS-specific instructions.

echo "Hello from macOS"

Linux

More Linux-specific instructions.

echo "Hello from Linux"

User Level Tabs

Beginner

Getting Started (Beginner)

This explanation is simplified for beginners. First, download the installer package from our website. Then, double-click the installer and follow the on-screen instructions.

Advanced

Getting Started (Advanced)

For advanced users comfortable with the command line:

# Install via package manager
npm install -g rallypoynt-cli

# Initialize with custom configuration
rallypoynt init --config advanced.config.js

# Set up development environment
rallypoynt dev --port 3000 --hot-reload

Combined Examples

Collapsible Section with Tabs

Installation Instructions

Choose your preferred installation method:

npm

npm install rallypoynt-os
npm run setup

Yarn

yarn add rallypoynt-os
yarn setup

Docker

docker pull rallypoynt/rallypoynt-os:latest
docker run -p 3000:3000 rallypoynt/rallypoynt-os

Admonition with Details

Before you begin, make sure you have:

• Node.js 14 or higher
• Git installed
• A text editor

Troubleshooting common setup issues

Node.js version problems

If you encounter errors related to Node.js versions, try using nvm to switch versions:

nvm install 14
nvm use 14

Permission errors

If you encounter permission errors during installation:

sudo npm install -g --unsafe-perm rallypoynt-os

Experience Toggle Examples

The Experience Toggle is a custom component that enhances Docusaurus' progressive disclosure capabilities. It allows users to set their experience level (beginner or advanced) and see content tailored to their knowledge level.

Your current experience level is set to: . Try changing it using the global settings panel at the top of the page to see how content updates throughout this page.

Basic Experience Toggle

Experience Level:

Getting Started (Beginner)

Welcome to the API documentation! Let's get you set up with the basics.

1. First, create a new project folder
2. Install the package using npm install rallypoynt-api
3. Import the main client import RallyPoynt from 'rallypoynt-api'
4. Initialize with your API key

Shorthand Components

You can also use the shorthand syntax with individual <Beginner> and <Advanced> components:

Authentication Section

Experience Level:

Simple Authentication

To authenticate with the API, just use your API key:

const client = new RallyPoynt('your-api-key');

// Now you can make API calls
const response = await client.getUsers();

With Fallback Content

You can provide fallback content to show when the alternative mode is selected:

Experience Level:

What is an API?

An API (Application Programming Interface) is like a menu at a restaurant. It shows you what you can order (what data you can request) and how to order it (what format to use).

When you make an API request, it's like placing an order, and the response is like getting your food.

Switch to Advanced mode to see the technical explanation.

Multiple Sections

Installation Options

Install using npm:

npm install rallypoynt-api

Configuration

Basic configuration is simple:

const client = new RallyPoynt('your-api-key');

Usage Tips

1. Choose the right disclosure pattern for your content type
2. Be consistent in how you use these components throughout your documentation
3. Don't nest too deeply - excessive nesting creates confusion
4. Test with both new and experienced users to ensure your disclosure strategy works for everyone
5. Consider responsive design - ensure components work well on all device sizes