Introduction

A layout utility component that allows users to reveal or hide supplementary page content. It facilitates space-efficient layout arrangements by consolidating details behind a clean, togglable header, making it perfect for FAQs, secondary spec sheets, technical details, or collapsible navigation rails.

The Collapsible component is fully integrated as a collapsible block in the Page Builder, enabling content authors and developers to easily nest trigger buttons and custom content layout blocks directly within the CMS.

Usage via CMS Page Builder (JSON)

These examples illustrate how content editors bind and structure custom collapsible blocks inside the JSON page schemas (content/pages/*.json).

1. Simple Frequently Asked Question (FAQ) Block

A standard collapsible block displaying an informational response when expanded. Uses the default open state and trailing chevron alignment.

{
  "type": "collapsible",
  "trigger": [
    {
      "type": "button",
      "text": "Is my subscription fee refundable?",
      "variant": "plain"
    }
  ],
  "defaultOpen": true,
  "showIndicator": true,
  "indicatorPlacement": "end",
  "children": [
    {
      "type": "text",
      "content": "Yes, we provide full refunds for cancelations processed within the first 14 days of account registration. No tedious processes required."
    }
  ]
}

2. Technical System Details with Leading Indicator

Showcases a collapsible layout that positions the expand/collapse indicator chevron before the trigger text, utilizing compact styling scales.

{
  "type": "collapsible",
  "trigger": [
    {
      "type": "button",
      "text": "Technical Node Specifications",
      "variant": "subtle"
    }
  ],
  "indicatorPlacement": "start",
  "showIndicator": true,
  "children": [
    {
      "type": "text",
      "content": "Our platform handles requests via serverless worker nodes deployed across 34 edge regions, delivering cache-hit responses under 10ms worldwide."
    }
  ]
}

CMS Configuration Reference

These fields map directly to Sveltia CMS block properties under public/admin/config.yml or the Page Builder configurations:

Developer Notes & Accessibility

• Hydration Island: As a dynamic layout relying on instant client-side expansion animations and height calculations, the Collapsible component is designated as an Interactive-First (Tier 1) component and hydrates as a client island by default ("interactive": true).
• WAI-ARIA Compliance: Under the hood, the trigger compiles with standard disclosure attributes (aria-expanded, aria-controls), and focus states match standard disclosure outlines. Keyboards cycle state effortlessly via the Space and Enter keys.