Expanding a form field

By using the Field Expander widget you can include fields in the form or in wizard step, without making them visible initially. The field or fields are made visible when a related form field receives focus. This allows you to design an uncluttered layout for forms that contain a lot of fields.

Visual appearance

When folded, users see only the primary part of the content, usually with a marker which indicates that the item can be opened. When unfolded, both the primary field and subordinate fields are visible, normally with a marker which indicates that the item can be closed, and with the primary field potentially rendered in a different style.

Note:

Unfolding results in the content making space for the unfolded item. Folding moves the content up to reclaim the space. You can apply transitions to the process.

User interactions

The unfolding action can be triggered when the user clicks on the primary field in its folded state, or gives it the focus. Folding can be triggered by clicking, or by moving focus away from the primary or the subordinate fields.

XDIME 2 elements

You use the widget:field-expander element to define hidden form fields.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>widget:field-expander</title>
    <xforms:model>
      <xforms:instance>
        <si:instance>
          <si:item name="login"/>
          <si:item name="password"/>
        </si:instance>
      </xforms:instance>
    </xforms:model>
  </head>
  <body>
    <div>
      <widget:field-expander id="myFieldExpander">
        <xforms:input ref="name">
          <xforms:label>Name </xforms:label>
        </xforms:input>
        <xforms:group>
          <xforms:input ref="login">
            <xforms:label>Login</xforms:label>
          </xforms:input>
          <xforms:input ref="password">
            <xforms:label>Password</xforms:label>
          </xforms:input>
        </xforms:group>
      </widget:field-expander>
    </div>
  </body>
</html>

Styling the widget

The mcs-toggle-event property describes the event that expands the primary field, with values 'focus' or 'click'.

The :mcs-unfolded pseudo-class, and the ::marker pseudo-element set the style for unfolded field labels and markers.

Non-client fallback

If a device does not support the Field Expander widget, then it displays all elements in the unfolded state.