Expanders

This is a draft specification. It is likely that changes will still be made before the final specification.

The ui:expanded attribute allows you to specify that a section or titled block element can be expanded and collapsed. The presence of the ui:expanded attribute indicates that an element is collapsible. The value of the attribute indicates whether the initial state is expanded.

You can also use informational titles to provide alternative titles for when the element is expanded or collapsed. Use an informational title with the type attribute set to "ui:expanded" to set a title for when the element is expanded and set to "ui:collapsed" to set a title for when the element is collapsed.

Notes

  • The ui:expanded attribute can occur on any section element and on any block element containing a title element.

  • The ui:expanded attribute takes the value "true" or "false".

  • A block can be expanded and collapsed if it has a ui:expanded attribute. The value indicates whether the initial state is expanded ("true") or collapsed ("false").

Examples

Create a collapsible figure that's expanded by default:

<figure ui:expanded="true">
  <title>The Mallard Logo</title>
  <media type="image" mime="image/png" src="mallard-logo.png"/>
</figure>

The Mallard Logo

Create a collapsible figure that's collapsed by default:

<figure ui:expanded="false">
  <title>The Mallard Logo</title>
  <media type="image" mime="image/png" src="mallard-logo.png"/>
</figure>

The Mallard Logo

Create a collapsible section that uses a different title when collapsed:

<section id="examples" ui:expanded="false">
  <info>
    <title type="ui:collapsed">Show Examples</title>
  </info>
  <title>Examples</title>
</section>

Processing Expectations

When a titled element is collapsed, only the title of the element is displayed, possibly with a visual indication that it can be expanded. When a titled element is expanded, it is displayed as normal, possibly with a visual indication that it can be collapsed. A titled element can be expanded and collapsed if it has the ui:expanded attribute. Processing tools must ignore the ui:expanded attribute on any elements that do not have a title.

If the value of the ui:expanded attribute is "false", the initial state of the titled element is collapsed. Otherwise, it is expanded.

If a collapsible element has an informational title with the type attribute set to "ui:collapsed", that title is displayed instead of the primary title when the element is collapsed. If a collapsible element has an informational title with the type attribute set to "ui:expanded", that title is displayed instead of the primary title when the element is expanded. Note that, if both are present, the primary title will never be displayed. However, the primary title must still be present for the ui:expanded attribute to take effect.

Feature Token

This feature defines a feature token for use with Mallard Conditionals. If a processing tool supports collapsible sections and titled block elements according to the processing expectations above, it should define the following feature token:

mallard:ui/1.0#expanded

Schema

The formal definition of the Mallard UI extension is maintained in RELAX NG Compact Syntax in code blocks within this specification. This is the formal definition for the ui:expanded attribute. The namespace declarations for this definition are on the page Mallard UI 1.0 DRAFT.

ui_expanded = attribute ui:expanded { "true" | "false" }
mal_section_attr &= ui_expanded ?
mal_block_attr &= ui_expanded ?

This schema allows the ui:expanded attribute on any block element. Because the collapsed state only shows the title, this attribute should only be used on elements that contain a title element. Processing tools should ignore this attribute if the element does not have a title.

© 2012 Shaun McCance
cc-by-sa 3.0 (us)

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.

As a special exception, the copyright holders give you permission to copy, modify, and distribute the example code contained in this document under the terms of your choosing, without restriction.

Powered by
Mallard