BlazorStatic is a static site generator that allows you to create static websites using Blazor components. It processes your Blazor pages and components at build time to generate static HTML files that can be hosted anywhere without requiring a server.

Key benefits:

• Uses familiar Blazor syntax and components
• Generates fast, static HTML
• SEO-friendly
• Can be hosted on any static hosting service

The ExpandableContent component works by:

1. Rendering static HTML during the build process
2. Including minimal JavaScript for client-side interactivity
3. Using CSS classes for styling and animations
4. Maintaining accessibility with proper ARIA attributes

Since it's client-side only, it works perfectly with static site generation and doesn't require any server-side processing.

The component is implemented as a standard Blazor component with these key features:

Parameters

[Parameter] public string Title { get; set; } = "Click to expand";
[Parameter] public bool Collapsed { get; set; } = true;
[Parameter] public RenderFragment? ChildContent { get; set; }

JavaScript Function

function toggleExpandableContent(button) {
    const contentDiv = button.nextElementSibling;
    const icon = button.querySelector('.expandable-icon');
    const isCollapsed = button.getAttribute('data-collapsed') === 'true';
    
    if (isCollapsed) {
        // Expand logic
        contentDiv.classList.remove('hidden');
        // ... more code
    } else {
        // Collapse logic
        contentDiv.classList.add('hidden');
        // ... more code
    }
}

Styling

The component uses Tailwind CSS classes for:

• Responsive design
• Dark mode support
• Hover and focus states
• Smooth transitions

Basic Usage

<ExpandableContent Title="My Section">
    <p>Content goes here</p>
</ExpandableContent>

Start Expanded

<ExpandableContent Title="Important Info" Collapsed="false">
    <p>This content is visible by default</p>
</ExpandableContent>

Complex Content

<ExpandableContent Title="Advanced Example">
    <div class="space-y-4">
        <p>You can include any HTML content:</p>
        <ul>
            <li>Lists</li>
            <li>Code blocks</li>
            <li>Images</li>
            <li>Other components</li>
        </ul>
        <pre><code>// Even code examples
function example() {
    return "Hello World";
}</code></pre>
    </div>
</ExpandableContent>

When used in markdown files, you can include markdown syntax inside:

<ExpandableContent Title="Markdown Content">

This is **bold** and this is *italic*.

- Item 1
- Item 2
- Item 3

You can also include [links](https://example.com) and `inline code`.

```code
// Code blocks work too
function test() {
    console.log("Hello");
}

The ExpandableContent component is great for:

✅ Good Use Cases

• FAQ sections - Perfect for question/answer format
• Additional details - Supplementary information that's not critical
• Code examples - Keep the main content clean while providing examples
• Step-by-step instructions - Break down complex processes
• Configuration options - Technical details that might overwhelm casual readers

❌ Avoid Using For

• Critical information - Don't hide important content
• Navigation - Use proper navigation components instead
• Primary content - The main message should be immediately visible
• Short content - If it's only a sentence or two, just show it

📝 Tips

• Use descriptive titles that clearly indicate what's hidden
• Consider the default state carefully (expanded vs collapsed)
• Group related expandable sections together
• Test with screen readers to ensure accessibility

This component includes several accessibility features:

Keyboard Navigation

• Tab - Focus the toggle button
• Enter/Space - Activate the toggle
• Focus indicators - Clear visual focus rings

Screen Reader Support

• Semantic HTML - Uses proper <button> elements
• ARIA attributes - aria-expanded and aria-hidden
• State announcements - Screen readers announce state changes

Visual Design

• High contrast - Works with high contrast modes
• Dark mode - Full dark mode support
• Responsive - Works on all screen sizes
• Clear indicators - Visual cues for interactive elements

The component is designed to be lightweight and performant:

JavaScript

• Minimal footprint - Single function, no external dependencies
• Efficient DOM manipulation - Direct class toggles, no jQuery
• One-time loading - Script only loads once per page

CSS

• Tailwind classes - Uses existing framework classes
• Hardware acceleration - CSS transitions use transform properties
• No layout thrashing - Uses hidden class for show/hide

Static Generation

• Build-time rendering - All HTML generated at build time
• No server load - Purely client-side interactivity
• Fast page loads - No additional network requests

Browser Support

• Works in all modern browsers (Chrome 60+, Firefox 55+, Safari 10.1+, Edge 79+)
• Graceful degradation - Content remains accessible even if JavaScript fails