Collapsible Content Sections

How It Works

Visual Appearance:

• Small [+] or [-] button appears in top-right corner of collapsible sections
• [-] = Section is expanded (visible)
• [+] = Section is collapsed (hidden)
• Float: right positioning keeps buttons out of content flow

Collapsing Sections:

• Click [-] button → Section collapses (hides), button changes to [+]
• Click [+] button → Section expands (shows), button changes to [-]
• Hover over button → Tooltip shows first ~300 characters of hidden content
• Collapse state saved via AJAX (no page reload)

Where It Appears:

• Navigation menus (if navs enabled in prefs)
• Text content blocks (if text blocks enabled in prefs)
• Module-defined collapsible regions

User Preferences

• Collapse handles on navs: Enable [+]/[-] buttons on navigation menus (checkbox, default: off)
• Collapse handles on text blocks: Enable [+]/[-] buttons on content sections (checkbox, default: off)

Both settings must be enabled by server admin AND individually by each user.

To Enable:

• Go to Preferences → Collapsible Region User Prefs
• Check "Should there be collapse handles on navs?" for nav collapse
• Check "Should there be collapse handles on text blocks?" for content collapse
• Submit preferences

Admin Settings

Server-wide controls to enable/disable collapse functionality:

• Collapse handles on navs (server): Allow collapse buttons on navigation (default: off)
• Collapse handles on text blocks (server): Allow collapse buttons on text (default: off)

If admin disables setting, users cannot enable it (setting becomes invisible in user prefs).

Technical Details

CSS Classes:

• modCollapse: Visible section (display: inline)
• modCollapseHidden: Hidden section (display: none, visibility: hidden)
• modCollapseToolbox: Float-right toggle button

JavaScript Function:

• doCollapse(id, name): Toggles section visibility, updates button text, saves state via AJAX
• setTitle(a, id): Generates tooltip from first 300 chars of section content
• Uses fetchDOMasync() to save collapse state without page reload

Hooks:

• collapse{ and }collapse: Wrap text content blocks
• collapse-nav{ and }collapse-nav: Wrap navigation sections
• template-collapse: Style variant control (classic vs default)
• checkuserpref: Hide user prefs if admin disabled setting

State Persistence:

• Collapse state saved per-user via module prefs
• Each section identified by sanitized name (alphanumeric + underscore/dash)
• State persists across sessions

Use Cases

Reduce Nav Clutter:

• Hide rarely-used navigation sections (e.g., Special, Champions)
• Keep frequently-used navs expanded (Village, Forest)
• Customize your interface to your playstyle

Hide Verbose Text:

• Collapse long module descriptions after first read
• Hide tutorial text once you understand mechanics
• Streamline busy pages (Clan Hall, Dwellings, etc.)

Accessibility:

• Keyboard-accessible (buttons are links with onClick)
• Hover tooltips provide content preview without expanding
• No impact on screen readers (content still in DOM)

Strategy

Enable Selectively:

• Start with navs disabled, text disabled
• If you find pages cluttered, enable text collapse first
• If navigation menus are overwhelming, enable nav collapse
• Don't enable both immediately - experiment

Recommended Collapse Candidates:

• Special navigation section (rarely used)
• Long module instructions (read once, hide forever)
• Secondary features on busy pages
• Anything you access less than once per day

Keep Expanded:

• Core navigation (Village, Forest, etc.)
• Combat/status information
• Time-sensitive content (newday countdown, etc.)
• Anything you check frequently

Limitations

• Requires JavaScript: No collapse functionality without JS enabled
• Admin Must Enable: Users cannot use module if admin disabled it server-wide
• Not Retroactive: Only works on content explicitly wrapped in collapse hooks
• No Auto-Collapse: Sections don't auto-collapse based on usage patterns

Comparison to Other UI Mods

• Collapsible Sections: Hide/show content on-demand (user control)
• Tabbed Navigation: Organize content into tabs (structural change)
• Custom CSS: Permanently hide content via display:none (admin control)

Collapsible Sections gives users granular control without permanently hiding content.