Collapsible Feature Implementation

Overview

This feature adds collapsible/expandable functionality to both standalone content sections and sidenotes. Content can be hidden by default and expanded when users click a disclosure triangle, with smooth animations.

Files Created/Modified

New Files

1. _includes/collapsible.html - Main collapsible component
2. docs/collapsible-examples.md - Usage examples and demonstrations
3. docs/COLLAPSIBLE_FEATURE.md - This documentation file

Modified Files

1. _includes/sidenote.html - Added collapse support
2. _includes/sidenote-block.html - Added collapse support
3. _includes/my-scripts.html - Added toggle JavaScript function
4. _sass/my-style.scss - Added CSS styles and animations
5. docs/writing.md - Added documentation
6. README.md - Added feature description

Features

Standalone Collapsible Sections

• Can be used anywhere in content
• Supports markdown in content
• Smooth expand/collapse animation
• Disclosure triangle indicator (▶/▼)
• Configurable initial state (open/closed)

Collapsible Sidenotes

• Works with all sidenote types (info, warning, tip, important, tldr, context)
• Preserves existing sidenote styling
• Optional - defaults to non-collapsible for backward compatibility
• Can specify default open/closed state

Usage

Standalone Collapsible

<div class="collapsible-wrapper">
  <div class="collapsible-header" onclick="window.toggleCollapsible('click-to-expand-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-click-to-expand-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Click to expand</span>
  </div>
  <div class="collapsible-content" id="content-click-to-expand-now" style="display: none;">
    <div class="collapsible-body">
      
<p>Your content here…
Can span multiple paragraphs and include <strong>markdown</strong>!</p>

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

Parameters:

• title (required) - The clickable title text
• content (required) - Content to show/hide
• collapsed (optional) - Start collapsed (default: true)
• icon (optional) - Optional icon before title
• type (optional) - Style variant for consistency with sidenotes

Collapsible Sidenote

  
  
  

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








<div class="collapsible-wrapper collapsible-info">
  <div class="collapsible-header" onclick="window.toggleCollapsible('caption-next-to-triangle-now')" style="cursor: pointer;">
    <span class="collapsible-toggle" id="toggle-caption-next-to-triangle-now">
      ▶
    </span>
    
    <span class="collapsible-title-text">Caption next to triangle</span>
  </div>
  <div class="collapsible-content" id="content-caption-next-to-triangle-now" style="display: none;">
    <div class="collapsible-body">
      <p>Your content here</p>

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

    
  </div>
</blockquote>
 

New Parameters:

• collapse (optional) - Enable collapse mode (default: false)
• collapsed (optional) - Start collapsed when collapse enabled (default: true)
• collapse_title (optional) - Caption for collapsible section (defaults to title if not specified)

Technical Implementation

CSS Animations

• Smooth max-height transition (300ms ease)
• Opacity fade (300ms ease)
• Hover effects on clickable header
• Responsive design for mobile

JavaScript

• Global toggleCollapsible(id) function
• No dependencies
• Works with Hydejack’s push-state navigation
• Unique IDs generated per instance

Backward Compatibility

• Existing sidenotes work without changes
• Collapse mode is opt-in via parameter
• No changes to visual appearance when not using collapse
• All existing sidenote parameters still work

Design Decisions

1. Minimal code changes - Reused existing sidenote structure
2. No visual changes - Preserves look and feel completely
3. Composable - Collapsible component can be embedded anywhere
4. Smooth animations - 300ms transitions for professional feel
5. Accessibility - Visual indicators (triangle) for expand/collapse state
6. Mobile-friendly - Responsive CSS adjustments

Examples

See docs/collapsible-examples.md for:

• Standalone collapsible sections (open/closed)
• Collapsible sidenotes (all types)
• Nested collapsibles
• Complex examples

Testing

To test the implementation:

1. Start Jekyll server:

   bundle exec jekyll serve
   

2. Navigate to:
   • http://localhost:4000/docs/collapsible-examples/ - Examples page
   • http://localhost:4000/story/ai-companion/intro/ - Real usage
3. Verify:
   • Click triangle to expand/collapse
   • Smooth animation occurs
   • Content shows/hides correctly
   • Works on mobile screen sizes
   • No JavaScript errors in console

Browser Support

Works in all modern browsers that support:

• CSS transitions
• JavaScript ES6
• requestAnimationFrame

Tested on:

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile Safari (iOS)
• Mobile Chrome (Android)

Future Enhancements

Potential improvements:

• Keyboard navigation (Enter/Space to toggle)
• ARIA attributes for screen readers
• Remember state in localStorage
• URL hash linking to auto-expand sections
• Animation customization options