Change record status: 
Project: 
Introduced in branch: 
8.x
Description: 

Previous versions of Drupal used the FIELDSET and LEGEND HTML elements to achieve "grouped, collapsible form elements". Fieldsets/legends are very hard to style, since all user agents handle them differently, and they have not been designed for the job of being a collapsible user interface element.

Drupal 8 leverages the new HTML5 DETAILS and SUMMARY elements, which were designed for exactly this job, and start to see native user agent implementations for the collapsible behavior (e.g., latest Chrome).

The HTML5 spec defines details elements as always collapsible. This means that there is no "uncollapsible" details are no longer possible (which is good for usability, since forms in Drupal typically over-used fieldsets). In Drupal details elements are closed by default.

You are still able to use the old "fieldset" element type, but now they are always "uncollapsible".

Drupal 7

$form['advanced'] = array(
  '#type' => 'fieldset',
  '#title' => t('Advanced settings'),
  '#collapsible' => TRUE,
  '#collapsed' => FALSE,
  '#description' => t('Lorem ipsum.'),
);
<fieldset class="collapsible form-wrapper collapse-processed" id="edit-advanced">
  <legend>
    <span class="fieldset-legend">
      <a class="fieldset-title" href="#">
        <span class="fieldset-legend-prefix element-invisible">Hide</span>
        Advanced settings
      </a>
      <span class="summary"></span>
    </span>
  </legend>
  <div class="fieldset-wrapper">
    <div class="fieldset-description">Lorem ipsum.</div>
  </div>
</fieldset>

Drupal 8

$form['advanced'] = array(
  '#type' => 'details',
  '#title' => t('Advanced settings'),
  '#description' => t('Lorem ipsum.'),
  '#open' => TRUE, // Controls the HTML5 'open' attribute. Defaults to FALSE.
);
<details open="open" class="form-wrapper" id="edit-advanced">
  <summary>Advanced settings</summary>
  <div class="details-wrapper">
    <div class="details-description">Lorem ipsum.</div>
  </div>
</details>
Impacts: 
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done

Comments

pjcdawkins’s picture

Why does the FAPI property remain "#collapsed", when it now translates into HTML5 attribute "open"? Can we have "#open" instead?

I never really liked the terms "collapsible" & "collapsed" and it looks like the HTML5 spec designers agree.

nod_’s picture

done.

pjcdawkins’s picture

:)

Chi’s picture

________________________
Override, don't change!