|Hide and Show Details||Version 18.104.22.168|
Use the Hide and Show Details pattern when users need to easily access a small amount of information within the page. Details appear using a partial page refresh. These details appear in context, meaning that they appear next to the object to which they are related. The detail in these sections is supplemental and should not be required for users to complete their primary tasks.
|Pattern Set Decision Table|
|Do the details become a primary resource for users and steps in their tasks? Do the users spend considerable time looking at the details?||No||No||Yes||Yes||Yes|
|Do users need to quickly obtain details (glance and close)?||Yes||Yes||Yes||No||No|
|Do these details need to be seen in conjunction with the other information?||Yes||Yes||Yes||Yes||No|
|How much space do the details use?||Small
|Does not exceed 512 x 384 pixels||A few inches
|A few inches
|A page or
|Header Hide/Show||Region Hide/Show||Table Hide/Show|
|Does the detail region have actions that can be performed against it independent of the page-level actions or actions belonging to in the surrounding region?||Yes||No||No|
|Does the detail region need to surround a number of different components (such as a form and table) or another level of nested regions (such as a sub-subheader)?||Yes||No||No|
|Is the detail region agnostic to the page hierarchy?||No||Yes||No|
|Is the detail region a nested region within a sub-subheader?||No||Yes||No|
|Is the detail region associated with a table row?||No||No||Yes|
You can place details inside of a subheader region on a page where a toolbar may be associated with the actions. Detail regions can contain a number of components or another level of nested regions. You can set the subheader to open or close by default based on the use case requirements. If the subheader is closed by default, the details inside the region should not be required or should not be critical to task completion. The user reveals the details by clicking the Disclosure icon button within the subheader region.
The user can click the Disclosure icon button again to collapse the detail region.
Details not associated with a subheader or requiring their own toolbars should use a show or hide region to store supplemental details.
Show/Hide in a Table
Detail can be shown for a table row. Clicking the Disclosure icon button in the row header reveals a detail region (in this example, a small two-column form).
Clicking the Disclosure icon button again collapses the detail region for the table row.
|Headers||Guidelines for headers and subheaders including show/hide regions|
|Secondary Windows||Guidelines governing the use of secondary windows or dialog boxes|
|Tables||Guidelines for row detail regions in a table|