Collapsible Details

Collapsible panels for optional content, FAQs, and progressive disclosure


Collapsible Details

Collapsible details blocks are perfect for optional content, FAQs, or hiding lengthy information that readers may want to explore on demand.

Basic Syntax

Create collapsible details using :::details[Summary]:

Click to expand

This content is hidden by default and can be revealed by clicking the summary.

You can include any markdown content inside, including:

  • Lists
  • Code blocks
  • Images
  • Even nested components!

Open by Default

Add open to make a details block expanded by default:

Already Expanded

This details block is open by default. Users can still collapse it by clicking the summary.

This is useful for content that's important but might be overwhelming if always visible.

Use Cases

Frequently Asked Questions

What is a flat-file CMS?

A flat-file CMS stores content in plain text files (like Markdown) instead of a database. This makes it:

  • Faster - No database queries
  • Simpler - Easy to version control with Git
  • Portable - Just copy files to deploy
  • Secure - No SQL injection risks
How do I add syntax highlighting to code?

Use fenced code blocks with a language identifier:

```javascript
console.log('Hello, World!');
```
Markdown

Supported languages include JavaScript, Python, Java, PHP, and many more!

Can I nest components inside details blocks?

Yes! You can include asides, steps, tabs, and other markdown features:

steps

  1. First step
  2. Second step
  3. Third step

Progressive Disclosure

Hide advanced or optional information:

Advanced Configuration Options

For advanced users, you can customize the behavior by editing the configuration file:

advanced:
  cache_enabled: true
  debug_mode: false
  max_upload_size: 10MB
  custom_headers:
    X-Custom-Header: "value"
YAML

Solution Reveals

Perfect for exercises and learning materials:

Exercise: What is the time complexity of binary search?

Show Solution

The time complexity of binary search is O(log n).

Explanation:

  • Binary search divides the search space in half with each iteration
  • For an array of size n, it takes at most log₂(n) steps to find an element
  • This makes it much more efficient than linear search O(n) for large datasets

Example:

def binary_search(arr, target):
    left, right = 0, len(arr) - 1

    while left <= right:
        mid = (left + right) // 2
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1

    return -1
PYTHON

API Documentation

Collapse detailed endpoint documentation:

POST /api/users - Create User

Creates a new user account.

Request Body:

{
  "username": "string",
  "email": "string",
  "password": "string",
  "role": "user|admin"
}
JSON

Response:

{
  "id": "uuid",
  "username": "string",
  "email": "string",
  "role": "string",
  "created_at": "timestamp"
}
JSON

Status Codes:

  • 201 - User created successfully
  • 400 - Invalid request data
  • 409 - Username or email already exists
  • 500 - Server error

Changelog / Version History

Version 2.1.0 - March 2024

New Features:

  • Added tabs component for multi-language examples
  • Implemented collapsible details blocks
  • Enhanced dark mode support

Bug Fixes:

  • Fixed scroll offset for heading anchors
  • Resolved nested fence detection in tabs
  • Improved mobile responsiveness

Breaking Changes:

  • Updated minimum PHP version to 8.2
  • Changed frontmatter parsing behavior
Version 2.0.0 - February 2024

Major Release:

  • Complete redesign with Starlight aesthetic
  • Added GitHub-style alerts
  • Implemented KaTeX math rendering
  • New steps component

Nested Details

You can nest details blocks for hierarchical content:

Programming Languages

Choose a category to see available languages:

Frontend
  • JavaScript
  • TypeScript
  • HTML/CSS
Backend
  • Python
  • PHP
  • Java
  • Node.js
Mobile
  • Swift
  • Kotlin
  • React Native
  • Flutter

With Code Examples

How to implement a linked list in Python

Here's a complete implementation of a singly linked list:

class Node:
    def __init__(self, data):
        self.data = data
        self.next = None

class LinkedList:
    def __init__(self):
        self.head = None

    def append(self, data):
        """Add a node to the end of the list"""
        new_node = Node(data)

        if not self.head:
            self.head = new_node
            return

        current = self.head
        while current.next:
            current = current.next
        current.next = new_node

    def display(self):
        """Print all elements in the list"""
        elements = []
        current = self.head

        while current:
            elements.append(str(current.data))
            current = current.next

        print(" -> ".join(elements))

# Usage
ll = LinkedList()
ll.append(1)
ll.append(2)
ll.append(3)
ll.display()  # Output: 1 -> 2 -> 3
PYTHON

Time Complexities:

  • Append: O(n)
  • Prepend: O(1)
  • Search: O(n)
  • Delete: O(n)

Best Practices

Multiple Details in Sequence

Create an FAQ section with multiple collapsible items:

What programming language should I learn first?

For beginners, we recommend starting with Python because:

  • Clean, readable syntax
  • Large community and resources
  • Versatile (web, data science, automation)
  • Easier to learn than languages like C++ or Java
How long does it take to learn programming?

It depends on your goals and time commitment:

  • Basic proficiency: 3-6 months with consistent practice
  • Job-ready skills: 6-12 months of focused learning
  • Mastery: Years of continuous learning and experience

Remember: Programming is a lifelong learning journey!

Do I need a computer science degree?

Not necessarily! Many successful programmers are self-taught or have completed bootcamps.

Advantages of formal education:

  • Structured learning path
  • Computer science fundamentals
  • Networking opportunities

Self-taught advantages:

  • Flexible schedule
  • Lower cost
  • Focus on practical skills

Accessibility Features

The details component is built on the native HTML <details> element, providing:

  • Keyboard Navigation - Space or Enter to toggle
  • Screen Reader Support - Announces expanded/collapsed state
  • Progressive Enhancement - Works without JavaScript
  • Focus Management - Maintains proper focus order
  • Print-Friendly - All content visible when printing

Try It Yourself

Create your own collapsible details:

:::details[Your Summary Text]
Your hidden content goes here!
:::
Markdown

Or make it open by default:

:::details[Expanded by Default] open
This will be visible initially.
:::
Markdown