Skip to main content

Collapsible Content & Details

Collapsible content helps organize information and improve page readability by allowing users to expand sections on demand. Docusaurus supports several ways to create collapsible content, from simple HTML details elements to custom components.

HTML Details Element​

Basic Details​

The simplest way to create collapsible content is using the HTML <details> element:

<details>
<summary>Click to expand</summary>

This content is hidden by default and revealed when the user clicks the summary.

You can include **markdown** formatting, `code`, and other elements here.

</details>

Result:

Click to expand

This content is hidden by default and revealed when the user clicks the summary.

You can include markdown formatting, code, and other elements here.

Open by Default​

Make a details element expanded by default using the open attribute:

This is expanded by default

This content is visible immediately when the page loads.

Collapsible Code Blocks​

Simple Collapsible Code​

Wrap code blocks in details elements for collapsible code examples:

Show Docker Compose Example
docker-compose.yml
version: '3.8'
services:
  web:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./html:/usr/share/nginx/html
  db:
    image: postgres:13
    environment:
      POSTGRES_PASSWORD: password

Multiple Code Examples​

Create collapsible sections for different examples:

Basic Configuration
nginx.conf
server {
    listen 80;
    server_name example.com;
    
    location / {
        proxy_pass http://localhost:3000;
    }
}
Advanced Configuration with SSL
nginx.conf
server {
    listen 443 ssl http2;
    server_name example.com;
    
    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;
    
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Nested Collapsible Content​

Nested Details​

You can nest details elements for hierarchical content organization:

Installation Methods
Docker Installation

  1. Pull the image:

    docker pull nginx:latest

  2. Run the container:

    docker run -d -p 80:80 nginx:latest
Manual Installation

  1. Update package list:

    sudo apt update

  2. Install Nginx:

    sudo apt install nginx

Styling Collapsible Content​

Custom CSS for Details​

Add custom styling to your details elements in src/css/custom.css:

/* Basic details styling */
details {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 8px;
  margin: 1rem 0;
  overflow: hidden;
}

details summary {
  background: var(--ifm-color-emphasis-100);
  padding: 1rem;
  cursor: pointer;
  font-weight: bold;
  border: none;
  outline: none;
  transition: background-color 0.2s ease;
}

details summary:hover {
  background: var(--ifm-color-emphasis-200);
}

details[open] summary {
  background: var(--ifm-color-primary);
  color: white;
}

details .details-content {
  padding: 1rem;
  background: var(--ifm-background-surface-color);
}

/* Remove default marker and add custom icon */
details summary {
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

details summary::after {
  content: '▶';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.2s ease;
}

details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

/* Hide webkit default marker */
details summary::-webkit-details-marker {
  display: none;
}

Dark Mode Support​

Ensure your collapsible content works well in dark mode:

[data-theme='dark'] details {
  border-color: var(--ifm-color-emphasis-200);
}

[data-theme='dark'] details summary {
  background: var(--ifm-color-emphasis-200);
}

[data-theme='dark'] details summary:hover {
  background: var(--ifm-color-emphasis-300);
}

[data-theme='dark'] details[open] summary {
  background: var(--ifm-color-primary-dark);
}

Advanced Collapsible Patterns​

FAQ Section​

Create an FAQ section using multiple details elements:

How do I install Docker?

Docker installation varies by operating system:

  • Ubuntu/Debian: sudo apt install docker.io
  • CentOS/RHEL: sudo yum install docker
  • macOS: Download Docker Desktop from the official website
  • Windows: Download Docker Desktop from the official website
What's the difference between Docker and Docker Compose?
  • Docker: A containerization platform for running individual containers
  • Docker Compose: A tool for defining and running multi-container applications using YAML files

Docker Compose makes it easier to manage complex applications with multiple services.

How do I persist data in Docker containers?

Use Docker volumes or bind mounts:

# Using volumes
docker run -v myvolume:/data myimage

# Using bind mounts
docker run -v /host/path:/container/path myimage

Collapsible Troubleshooting Sections​

Organize troubleshooting information in collapsible sections:

🔴 Service won't start

Possible Causes:​

  1. Port already in use
  2. Configuration file errors
  3. Permission issues

Solutions:​

# Check if port is in use
netstat -tulpn | grep :80

# Check service logs
docker logs container_name

# Restart with correct permissions
sudo docker restart container_name
⚠️ Performance issues

Common Performance Problems:​

  • Insufficient memory allocation
  • Disk I/O bottlenecks
  • Network latency

Performance Tuning:​

# Monitor resource usage
docker stats

# Increase memory limit
docker run -m 512m myimage

# Use faster storage
docker run -v /dev/shm:/tmp myimage

Best Practices​

Content Organization​

  • Logical Grouping: Group related information together
  • Progressive Disclosure: Show basic info first, details on demand
  • Clear Summaries: Make summary text descriptive and actionable

User Experience​

  • Use semantic HTML elements
  • Ensure summaries are descriptive
  • Test with keyboard navigation
  • Consider screen reader compatibility

Mobile Optimization​

  • Ensure collapsible content works well on touch devices
  • Make summary text large enough for easy tapping
  • Test expand/collapse animations on mobile

Common Use Cases​

API Documentation​

GET /api/users - Retrieve user list

Parameters:

  • page (optional): Page number (default: 1)
  • limit (optional): Items per page (default: 10)

Response:

{
  "users": [
    {
      "id": 1,
      "name": "John Doe",
      "email": "[email protected]"
    }
  ],
  "pagination": {
    "page": 1,
    "total": 100
  }
}

Configuration Examples​

Environment Variables Configuration

Create a .env file in your project root:

.env
# Database configuration
DB_HOST=localhost
DB_PORT=5432
DB_NAME=myapp
DB_USER=postgres
DB_PASSWORD=secret

# Application settings
APP_PORT=3000
APP_ENV=development
JWT_SECRET=your-secret-key

# External services
REDIS_URL=redis://localhost:6379
EMAIL_SERVICE=sendgrid
EMAIL_API_KEY=your-sendgrid-key

Step-by-Step Guides​

Complete Docker Setup Guide

Step 1: Install Docker​

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

Step 2: Start Docker Service​

sudo systemctl start docker
sudo systemctl enable docker

Step 3: Add User to Docker Group​

sudo usermod -aG docker $USER

Step 4: Test Installation​

docker run hello-world

Resources​

Buy me a beer

💬 Discord Community Chat

Join the conversation! Comments here sync with our Discord community.

💬 Recent Comments

Loading comments...
💬Join Discord
☕Buy me a coffee