FormWidgets / Collapsible / Examples

Collapsible Examples

Live examples of the Collapsible widget showing different header types and initial states.

View Documentation

1. Basic Collapsible

Uses an <h3> as the header. Closed by default.

More Information

This content is hidden until the user clicks the header.

It can contain any HTML elements, including other widgets.

HTML
<div class="fw-collapsible">
  <h3>More Information</h3>
  <p>This content is hidden until the user clicks the header.</p>
</div>

2. Open by Default

Using data-open="true" to show content initially.

Important Notice

This block is expanded when the page loads.

HTML
<div class="fw-collapsible" data-open="true">
  <h4>Important Notice</h4>
  <p>This block is expanded when the page loads.</p>
</div>

3. Using Legend

The widget also supports <legend> tags, useful for fieldsets.

Advanced Settings
HTML
<fieldset class="fw-collapsible">
  <legend>Advanced Settings</legend>
  <div class="form-group">...</div>
</fieldset>