collapseboth

-collapseboth is a term used in user interface design to describe a behavior in which two adjacent panels or regions collapse at the same time into a more compact representation. This pattern is commonly applied in two-pane layouts, dashboards, editors, and document viewers to maximize available content space when screen width is limited or when users want to focus on primary content.

Implementation and behavior: collapseboth is typically triggered by a dedicated toggle control, a breakpoint in responsive layouts, or a gesture. When activated, both panels fold or slide toward a central axis (or toward a compact state) while preserving a minimal control surface to allow re-expansion. Transitions are often animated to provide visual continuity, and the collapsed state may either show slim handles, icons, or a concise summary of each panel.

Design considerations: designers should ensure accessibility, including keyboard operability and screen reader compatibility, clear focus management, and a predictable restoration path. It is important to decide whether both panels always collapse together or only when certain conditions are met, and how state is preserved across navigation. Performance should be considered for large panels, and visual cues should clearly indicate the active state and how to revert it.

See also: collapse (UI), responsive design, two-pane layout, accordion. Notes: collapseboth is a descriptive pattern used across various frameworks and may be implemented differently depending on the platform or library.