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!');
```
MarkdownSupported 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
- First step
- Second step
- 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"
YAMLSolution 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
PYTHONAPI 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"
}
JSONResponse:
{
"id": "uuid",
"username": "string",
"email": "string",
"role": "string",
"created_at": "timestamp"
}
JSONStatus Codes:
201- User created successfully400- Invalid request data409- Username or email already exists500- 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
PYTHONTime 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!
:::
MarkdownOr make it open by default:
:::details[Expanded by Default] open
This will be visible initially.
:::
Markdown