Collapse Title Reference

Visual Structure

When using a collapsible sidenote, you now have two separate titles:

┌─────────────────────────────────────────────────┐
│  📘 BADGE TITLE                        ← title  │  ← Sidenote Badge (always visible)
├─────────────────────────────────────────────────┤
│                                                 │
│  ▶ Collapse caption here  ← collapse_title     │  ← Collapsible Header (clickable)
│                                                 │
│  [Content hidden when collapsed]                │  ← Body (shows/hides)
│                                                 │
└─────────────────────────────────────────────────┘

When expanded:

┌─────────────────────────────────────────────────┐
│  📘 BADGE TITLE                        ← title  │  ← Sidenote Badge (always visible)
├─────────────────────────────────────────────────┤
│                                                 │
│  ▼ Collapse caption here  ← collapse_title     │  ← Collapsible Header (clickable)
│                                                 │
│     Your content appears here...                │  ← Body (visible)
│     With full markdown support.                 │
│     - Lists                                     │
│     - Links                                     │
│     - Everything!                               │
│                                                 │
└─────────────────────────────────────────────────┘

Usage Examples

Example 1: Different Titles

  
  
  

<blockquote id="technical-details" class="custom-sidenote custom-sidenote-info">
  <div class="sidenote-badge">
    <span class="sidenote-icon">
      
        
            ℹ️
        
      
    </span>
    <span class="sidenote-title"><a href="#technical-details" class="sidenote-anchor">#</a> Technical Details</span>
  </div>
  <div class="sidenote-body">
    
      








<div class="collapsible-wrapper collapsible-info">
  <div class="collapsible-header" onclick="window.toggleCollapsible('click-to-view-implementation-notes-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-click-to-view-implementation-notes-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Click to view implementation notes</span>
  </div>
  <div class="collapsible-content" id="content-click-to-view-implementation-notes-now" style="display: none;">
    <div class="collapsible-body">
      <p>Detailed technical content here…</p>

    </div>
  </div>
</div>

    
  </div>
</blockquote>
 

Result:

• Badge shows: “Technical Details”
• Collapsible section shows: “▶ Click to view implementation notes”

Example 2: Same Title (Default Behavior)

  
  
  

<blockquote id="important-note" class="custom-sidenote custom-sidenote-warning">
  <div class="sidenote-badge">
    <span class="sidenote-icon">
      
        
            ⚠️
          
      
    </span>
    <span class="sidenote-title"><a href="#important-note" class="sidenote-anchor">#</a> Important Note</span>
  </div>
  <div class="sidenote-body">
    
      








<div class="collapsible-wrapper collapsible-warning">
  <div class="collapsible-header" onclick="window.toggleCollapsible('important-note-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-important-note-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Important Note</span>
  </div>
  <div class="collapsible-content" id="content-important-note-now" style="display: none;">
    <div class="collapsible-body">
      <p>Your content…</p>

    </div>
  </div>
</div>

    
  </div>
</blockquote>
 

Result:

• Badge shows: “Important Note”
• Collapsible section shows: “▶ Important Note” (uses title as default)

Example 3: Short Badge, Long Collapse Caption

  
  
  

<blockquote id="faq" class="custom-sidenote custom-sidenote-tip">
  <div class="sidenote-badge">
    <span class="sidenote-icon">
      
        
            💡
          
      
    </span>
    <span class="sidenote-title"><a href="#faq" class="sidenote-anchor">#</a> FAQ</span>
  </div>
  <div class="sidenote-body">
    
      








<div class="collapsible-wrapper collapsible-tip">
  <div class="collapsible-header" onclick="window.toggleCollapsible('click-here-to-see-frequently-asked-questions-about-this-feature-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-click-here-to-see-frequently-asked-questions-about-this-feature-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Click here to see frequently asked questions about this feature</span>
  </div>
  <div class="collapsible-content" id="content-click-here-to-see-frequently-asked-questions-about-this-feature-now" style="display: none;">
    <div class="collapsible-body">
      <p>Q: How does it work? A: …</p>

    </div>
  </div>
</div>

    
  </div>
</blockquote>
 

Result:

• Badge shows: “FAQ” (short, clean)
• Collapsible section shows: “▶ Click here to see frequently asked questions about this feature” (descriptive)

When to Use collapse_title

Use separate collapse_title when:

• ✅ Badge should be short/concise but collapse needs more context
• ✅ You want call-to-action language (“Click to learn more…”)
• ✅ Badge is a category label and collapse is a question
• ✅ Different audiences (badge for scanning, collapse for detail seekers)

Use same title (omit collapse_title) when:

• ✅ Title is already descriptive enough
• ✅ You want visual consistency
• ✅ Simpler is better for your use case

Parameter Summary

Parameter	Location	Purpose	Default
title	Badge (top)	Main sidenote title	“Side Note”
collapse_title	Body (collapse header)	Caption next to triangle	Same as title
type	Both	Style variant	“info”
collapse	N/A	Enable collapse mode	false
collapsed	Body	Start collapsed?	true

Code Reference

The implementation uses this logic:

If collapse_title is provided, it’s used. Otherwise, it falls back to title.

This ensures:

• ✅ Backward compatibility (existing code works without changes)
• ✅ Flexibility (use different titles when needed)
• ✅ Simplicity (one title by default is enough for most cases)