Steven Pemberton, CWI Amsterdam
Version: 2018-08-22.
For long forms, you may want to collapse certain sections not currently relevant, either automatically, or by letting the user collapse them.
Here are two techniques: using switch
and using relevance.
Here you use a switch
with two cases, one for the open case,
and one for the closed case. Each starts with a trigger
that is
used to select the other case. The closed case contains nothing else, and the
open case contains the content you want to hide/reveal:
<group> <switch> <case id="closed"> <trigger appearance="minimal"> <label>⏵Section 1</label> <toggle case="open" ev:event="DOMActivate"/> </trigger> </case> <case id="open"> <trigger appearance="minimal"> <label>⏷Section 1</label> <toggle case="closed" ev:event="DOMActivate"/> </trigger> ... collapsible stuff ... </case> </switch> </group>
Here it is in use:
Here we use a group
with a ref
to an
administrative value that determines if the group is displayed or not, using
relevance: the administrative value is relevant if the group is to be
displayed, and non-relevant otherwise. The relevance can be set automatically,
according to some condition, or can be set by the user, as in this case, using
a trigger:
<instance id="admin"> <admin xmlns=""> <show/> </admin> </instance> <bind ref="instance('admin')/show" relevant=". = true()"/> ... <group> <trigger appearance="minimal"> <label><output value="if(instance('admin')/show=true(), '⏷Section 1', '⏵Section 1')"/></label> <setvalue ev:event="DOMActivate" ref="instance('admin')/show" value="not(boolean-from-string(.))" /> </trigger> <group ref="instance('admin')/show"> ... collapsible stuff ... </group> </group>
Here it is in use: