h1. {color:#003366}{*}Expand and collapse{*}{color}
h2. Summary
In some areas of the BI applications, information can be shown in both condensed and expanded forms. For instance, in RAFT’s primary navigation (on the left of the screen), we allow users to expand and collapse menu items to browse the site hierarchy. In applications that include complex hierarchies, expanding and collapsing of those hierarchies is allowed.
h2. Code
Example (in use, with an interaction, in context)
{code}
<div id="navgrid_content" style="overflow: hidden; outline: 0px;"><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div><div tabindex="0" style="width: 100%;"><div><div style="left: -1000px; width: 1308px;" unselectable="on"><div id="slickgrid_77326NAV_ITEM" title="" style="width: 293px;"><span></span></div></div></div></div><div tabindex="0" style="display: none;"><div><div style="left: -1000px; width: 0px;" unselectable="on"></div></div></div><div tabindex="0" style="top: 0px; height: 100%; width: 100%;"><div style="display: none; width: 101%;"><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 308px;"></div><div style="width: 293px;"></div></div><div style="display: none;"><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 71px; width: 100%;"><div tabindex="0" hidefocus="" style="width: 293px; height: 128px;"><div style="top:0px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="0" data-gridid="my_raft.JZSILVER-2110688701-001">Jessica Silver active workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:32px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="1" data-gridid="my_raft.JZSILVER-1357556268-001">Jessica Silver closed workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:64px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="1005" data-gridid="my_raft.JZSILVER-2434450069-001">Jessica Silver proposal workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div><div style="top:96px"><div> <span> <span></span> <span></span> <span></span> <span data-objecttype="WORKSET" data-id="1006" data-gridid="my_raft.JZSILVER-1634969297-001">New Workset</span> <span></span> <span title="This Workset has an alert!"></span></span></div></div></div></div></div><div tabindex="0" style="display: none;"><div style="display: none;"><div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 308px;"></div><div></div></div><div style="display: none;"><div style="width:10000px"></div></div><div tabindex="0" hidefocus="" style="overflow: auto; height: 71px;"><div tabindex="0" hidefocus="" style="height: 128px;"></div></div></div><div tabindex="0" style="display: none;"><div tabindex="0" hidefocus="" style="overflow: auto;"><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" style="display: none;"><div tabindex="0" hidefocus="" style="overflow: auto;"><div tabindex="0" hidefocus=""></div></div></div><div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div></div>
{code}
h2. {color:#003366}{*}Example{*}{color}
!Screen shot 2013-12-02 at 12.56.06 PM.png!
h2. Related patterns
Tabs
Hyperlinks
h2. Problem
Hierarchical information can be too long to show expanded at all times.
h2. Solution
Adding expand/collapse functionality allows users to decide how much or how little information to view at once.
h2. Rationale
We considered having this menu open at all times, but content proved to be overwhelming for readability or scanability. |