Collapsible Examples

Examples of collapsible content and sidenotes

Collapsible Content Examples

This page demonstrates the collapsible functionality available in TL;DR sections, standalone sections, and sidenotes.

TL;DR Section (Simple)

TL;DR

This is a simple TL;DR summary that appears at the top of content. It uses a clean purple theme and left border to stand out without being too fancy.

TL;DR Section (Multi-paragraph)

TL;DR

This TL;DR demonstrates multiple paragraphs and markdown formatting.

Key Points:

• Simpler than sidenotes
• Perfect for content summaries
• Purple theme for consistency
• Supports all markdown features

Great for giving readers a quick overview before diving into details!

TL;DR Section (Collapsible - Open by Default)

TL;DR

▶ Show/Hide Summary

This TL;DR starts expanded but can be collapsed.

Users might want to:

• Read the summary first (default open)
• Collapse it after reading
• Keep it visible while reading the main content

The subtle gradient background helps it stand out.

TL;DR Section (Collapsible - Closed by Default)

TL;DR

▶ Show/Hide Summary

This TL;DR starts collapsed for a cleaner initial view.

Users who want the summary can expand it. Great for:

• Very long summaries
• Optional context
• Repeat readers who already know the content

The purple theme matches the existing tldr sidenote style.

---

Standalone Collapsible Section (Collapsed by Default)

▶ Click to expand details

This is a collapsible section that starts collapsed.

You can include:

• Markdown formatting
• Lists
• Bold and italic text
• Links and more!

This is great for hiding detailed information that users can expand when needed.

Standalone Collapsible Section (Open by Default)

▶ Click to collapse

This collapsible section starts open (expanded).

Users can still collapse it by clicking the triangle.

Perfect for content that should be visible by default but can be hidden to save space.

Collapsible Sidenote (Info Type)

ℹ️ # Expandable Info

▶ Expandable Info

This is a collapsible sidenote that starts collapsed.

It combines the visual styling of a sidenote with the collapse/expand functionality.

Great for:

• Long explanatory notes
• Optional reading material
• Detailed technical information

Collapsible Sidenote with Custom Collapse Title

ℹ️ # Technical Details

▶ Click to show implementation notes

This example shows how you can have:

• Different title in the badge (appears at the top)
• Different caption next to triangle (appears in the body)

The badge shows “Technical Details” but the collapsible section says “Click to show implementation notes”.

This is useful when you want a short badge title but a more descriptive collapse caption.

Collapsible Sidenote (Warning Type, Open by Default)

⚠️ # Important Warning

▶ Important Warning

This warning sidenote starts expanded but can be collapsed.

⚠️ Important considerations:

• This content is visible by default
• Users can collapse it to save screen space
• The warning styling is preserved

Regular (Non-Collapsible) Sidenote

💡 # Traditional Sidenote

This is a regular sidenote without collapse functionality. It works exactly as before - no changes to existing functionality!

Nested Example

You can also use collapsible sections within regular sidenotes:

⚙️ # Complex Example

This sidenote contains additional collapsible sections within it.

▶ Expand for more details

This is nested collapsible content inside a sidenote!

You can have multiple levels of organization this way.

Pretty cool, right?

Usage Summary

TL;DR Section

{% capture summary %}
Quick summary here...
{% endcapture %}
{% include tldr.html content=summary %}

<!-- Collapsible version -->
{% include tldr.html content=summary collapse=true collapsed=false %}

Standalone Collapsible

{% capture content %}
Your content here...
{% endcapture %}
{% include collapsible.html title="Title" content=content collapsed=true %}

Collapsible Sidenote

{% include sidenote.html 
   title="Badge Title" 
   collapse_title="Caption next to triangle"
   type="info"
   content="Content here" 
   collapse=true 
   collapsed=true 
%}

Parameters

TL;DR:

• content: Summary text (required)
• title: Custom label (default: “TL;DR”)
• collapse: Enable collapse mode (default: false)
• collapsed: Start collapsed (default: false)
• collapse_title: Caption next to triangle (default: “Show/Hide Summary”)

Sidenotes:

• title: Display title in badge (required)
• collapse_title: Caption next to triangle (optional, defaults to title)
• content: Content to show/hide (required)
• collapsed: Start collapsed? (default: true)
• collapse: Enable collapse in sidenotes (default: false)
• type: Sidenote style variant (info, warning, tip, important, tldr, context)