Hide/Show

Last Updated 03-Dec-2003

General Description

The hide/show element allows a portion of the page contents to toggle between hidden or shown. There are multiple valid locations where hide/show can be used: Below is the contents of this guideline:

Guideline Attributes

Spec Version # - 3.1
Spec Contributors - Betsy Beier, Ivy Leung
UI Models - all models
Example Products - SSPurchasing, Resource Management, Enterprise Manager
Related Guidelines - Tables, HGrid, Tabs (level 3 + sub options), Header Component

Interaction and Usage Specifications

General Principles

Updateable Fields and Hide/Show

Hide/Show Default State and Persistence

Hide/Show Link Text

Hide/Show in the Content of a Page

Hide/Show in a Table

Hide/Show in Side Navigation

Visual Specifications

Visual Definitions of Hide/Show

Hide/Show -Basic (Portion of section of content within a Page)


The basic hide/show element can be used in a section of contents of a page.

Hide/Show in Full Section of Page (Subheader or Subsubheader Section ONLY)


The hide/show is directly below a subheader or subsubheader, and if content is shown, instruction text immediately follows the hide/show. See Component Order guideline for complete list of the vertical order of the components.

Hide/Show in a Table


See Table Guideline: Hide/Show in Table for all interaction and visual notes.

Hide/Show in Side Navigation


See Tab: Side Navigation for all interaction and visual notes.