| UI or UX | UI + UX - Grouped show-hide sections for related page content | UI + UX - Section-switching component | UI + UX - Persistent local hierarchy at the side of content | UI + UX - Grouped filter control panel for narrowing a current result set |
| UI guidance | Render each section title as a real button inside an appropriate heading, expose expanded or collapsed state, and connect the button to the panel it controls. | Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab. | Render a vertical navigation region beside the main content that exposes the current area's parent, child, and optional grandchild pages with a clear active indicator. | Render filter categories as labelled form controls in a panel adjacent to the result set on wide layouts, with a visible result count and active-filter summary near the results. |
| UX guidance | Use an accordion when a page has several related sections that users may inspect selectively while still needing an overview of all section labels. | Help users switch between sibling sections in the same page context without changing routes or losing local work. | Use side navigation to help users move within a complex section without losing the current page's position in that section. | Use a filter panel to help users narrow the current list or search result set while preserving orientation, search query, sort order, pagination context, and selected values. |
| Good UI | A product policy page shows Shipping, Returns, Warranty, and Contact sections as heading buttons with clear expanded states and one open panel. | Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab. | A settings page shows Account, Billing, Team, and Security in a left rail with Security expanded and Audit log marked as current. | A desktop search page shows a left filter panel with Status, Type, and Date groups, while active chips and the result count sit above the results. |
| Bad UI | A page hides every required instruction behind plus icons with no headings, state, or expand-all route. | Tabs wrap unpredictably or look like unrelated buttons. | A sidebar mixes Dashboard, Reports, Sign out, Help, Team, API, Billing, and Marketing with no section grouping. | A filter drawer closes with no active count, leaving users unaware that filters are still hiding records. |
| Good UX | A user opens Returns, then Warranty, scans both sections, collapses Returns, and the page keeps focus and open-state feedback stable. | Users switch between sibling sections without leaving page context or losing panel-local notes. | Users open Billing, switch to Invoices, then return to Security and see the Security group still expanded. | A user selects Status: Open and Type: Appeal, applies the batch, lands back at the result summary, and sees 12 records with both criteria removable. |
| Bad UX | A user misses eligibility requirements because the only required step is hidden inside a collapsed section by default. | Using tabs as primary navigation to unrelated pages. | Users must reopen a drawer every time they move between sibling pages in the same desktop section. | Applying a filter silently resets the query, sort order, current page, and view density. |
| Best fit | A page has several related sections and users do not need all details visible at once. | Users switch between sibling panels frequently. | A product area has several related pages arranged in a visible hierarchy. | Users need to narrow the current search results, browse results, table, card grid, or list by multiple criteria. |
| Avoid when | There is only one revealable section and a simpler details disclosure is enough. | The destinations are unrelated pages. | The product only has a few pages and does not need a hierarchy. | The result set is small enough that scanning is faster than filtering. |
| Required state | All collapsed state with every section title visible. | Default active tab and visible panel. | Default state with the local section hierarchy visible beside content. | Default state with no user-applied filters and an explicit result count. |
| Accessibility burden | Use native buttons for section controls and expose expanded or collapsed state. | Expose the active tab and associated panel. | Use a labeled navigation landmark that distinguishes local side navigation from primary navigation. | Use semantic form controls with fieldsets, legends, labels, and accessible names for filter categories and values. |
| Common misuse | Using divs or links as section toggles without button semantics or expanded state. | Using tabs as a primary site navigation system. | Duplicating global navigation links in the side navigation. | Hiding active filters inside a closed panel with no count, chips, or result-state summary. |