Mirage: BGA styles

6.4 forms.collapsible-fieldset Collapsible fieldset

Toggle example guides Toggle HTML markup

Fieldsets with optional entry fields can be hidden with collapsed fieldsets.

Examples
Default styling
A collapsible fieldset A summary of the form state
Place the form elements to hide inside this wrapping div.
.is-collapsed
The collapsed fieldset.
Markup: forms/collapsible-fieldset/collapsible-fieldset.twig 
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">fieldset</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapsible-fieldset </span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">legend</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapsible-fieldset__legend"</span>&gt;</span>
      A collapsible fieldset
      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapsible-fieldset__summary"</span>&gt;</span>A summary of the form state<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
    <span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">legend</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"collapsible-fieldset__wrapper"</span>&gt;</span>
    Place the form elements to hide inside this wrapping div.
  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">fieldset</span>&gt;</span>
</span>
Source: forms/collapsible-fieldset/_collapsible-fieldset.scss, line 1