Collapsible
fw-collapsible
A widget to create a collapsible block of content. It automatically styles the header as a clickable trigger with a toggle icon.
Usage
HTML (Auto-init)
Add the fw-collapsible class to a container. The first header element (h1-h6 or legend) inside it becomes the trigger.
HTML
<div class="fw-collapsible">
<h3>Click to Expand</h3>
<p>This content is hidden by default.</p>
<p>It reveals when the header is clicked.</p>
</div>
<script>FormWidgets.autoInit();</script>Open by Default
Use the data-open="true" attribute to start in the expanded state.
HTML
<div class="fw-collapsible" data-open="true">
<h4>Always Visible</h4>
<p>This content starts visible.</p>
</div>Options
| Option | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Initial state of the collapsible block. |
Data Attributes
| Data Attribute | Equivalent Option | Example |
|---|---|---|
| data-open | open | data-open="true" |
Methods
widget.open()
Expands the content block.
widget.close()
Collapses the content block.
widget.toggle()
Toggles the state between open and closed.
Features
Auto Header
Automatically detects H1-H6 or Legend tags to use as the trigger.
Icon Toggle
Adds a "+" icon that switches to "-" when expanded.
Accessible
Full keyboard support (Enter/Space) and ARIA attributes.