# Accordion ## expand\_more Purpose of the Accordion ### Group related content into collapsible sections for easy scanning This component reduces visual clutter and cognitive load on long pages while keeping supporting information accessible. ![Accordion component in layout](/sites/g/files/omnuum631/files/styles/hwp_1_1__480x480/public/2026-02/accordion_2.png?itok=1wCw0hSe) *Example page context showing where the Accordion is typically used* ## ✓ Use this component when: - You have multiple related sections of supporting content - Users are likely searching for specific answers - Content can be clearly summarized with descriptive headings - Showing all content at once would overwhelm the page ## ✕ Avoid using this component when: - Content is critical for all users to read - Users need to compare information across sections - Content is short enough to read without collapsing - Headings cannot clearly describe the hidden content ## Choosing Between Similar Components If your goal is… SortYour goalUse this componentHide and reveal related details Accordion Show all content at once Text Organize high-level page sections Page headings ## Accordion overview An Accordion component is a vertical stack of content panels that can be opened and closed. Accordions are often used to collapse sections of related content in order to reduce scrolling. ## Example: Organizing supporting content on a long page This example shows an Accordion used to group supporting information, allowing users to quickly scan headings and expand only the sections relevant to them. ### Omit needless words expand\_more Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that he make every word tell. ### Use definite, specific, concrete language expand\_more Prefer the specific to the general, the definite to the vague, the concrete to the abstract. ### Use the active voice expand\_more The active voice is usually more direct and vigorous than the passive: > I shall always remember my first visit to Boston. This is much better than > My first visit to Boston will always be remembered by me. The latter sentence is less direct, less bold, and less concise. If the writer tries to make it more concise by omitting “by me,” > My first visit to Boston will always be remembered, it becomes indefinite: is it the writer, or some person undisclosed, or the world at large, that will always remember this visit? ### Put statements in positive form expand\_more Make definite assertions. Avoid tame, colorless, hesitating, non-committal language. Use the word not as a means of denial or in antithesis, never as a means of evasion. ## Elements of an Accordion SortElementPurposeHeading Describes the panel and serves as the panel control label Panel Contains the panel content, which can include formatted text, images, and links as well as other components Expand/collapse controls Expands or collapses all panels in the accordion component ## Guidance on using an Accordion - **Reserve for secondary content.** Use an accordion to present secondary content. Don’t hide content in an accordion when it’s important that users notice and read all of it. - **Group sections of related content.** Group content related to a topic in a single accordion panel, where the user likely only needs access to one or two sections, such as an FAQ - **Provide accordion controls.** Expand/collapse controls are helpful when it’s likely some users will want to see all sections at the same time. - **Validate the approach with users.** Test with users to ensure hiding content in accordion panels does not interfere with task completion. ## Content guidelines **Write headings that stand alone** Panel headings should clearly describe the content they reveal without relying on surrounding context. **Keep panel content focused** Each panel should cover a single topic. **Avoid burying required information** If users must read the content, do not place it inside an accordion. **Maintain consistent tone and structure** Use consistent formatting and writing style across panels. ## Accessibility considerations - Use clear, descriptive headings - Preserve logical focus order and keyboard interaction - Avoid nesting accordions within other accordions - Do not rely on accordions to hide required information ## Accordion features SortFeaturesStandardsOptimized color contrast Minimum Contrast Heading used as accordion control name Control Names Background color, icons, and underlining used to indicate links Link Indicators Sans serif typeface used for CTA links Wayfinding Font Controls receive focus a logical sequence Focus Order See also:- [ Components ](/page-categories/components) ## Accordion Showcase ### Accordion with “auto close” interaction expand\_more This example shows the Accordion component set to display with the first item open and to “auto close” accordion panels. ### Omit needless words expand\_more Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that he make every word tell. ### Use definite, specific, concrete language expand\_more Prefer the specific to the general, the definite to the vague, the concrete to the abstract. ### Use the active voice expand\_more The active voice is usually more direct and vigorous than the passive: > I shall always remember my first visit to Boston. This is much better than > My first visit to Boston will always be remembered by me. The latter sentence is less direct, less bold, and less concise. If the writer tries to make it more concise by omitting “by me,” > My first visit to Boston will always be remembered, it becomes indefinite: is it the writer, or some person undisclosed, or the world at large, that will always remember this visit? ### Put statements in positive form expand\_more Make definite assertions. Avoid tame, colorless, hesitating, non-committal language. Use the word not as a means of denial or in antithesis, never as a means of evasion. ### Accordion with “stay open” interaction and expand/collapse controls expand\_more This example shows the Accordion component with controls to open and close all panels and the behavior set to “stay open.” Open all sections Close all sections ### Omit needless words expand\_more Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that he make every word tell. ### Use definite, specific, concrete language expand\_more Prefer the specific to the general, the definite to the vague, the concrete to the abstract. ### Use the active voice expand\_more The active voice is usually more direct and vigorous than the passive: > I shall always remember my first visit to Boston. This is much better than > My first visit to Boston will always be remembered by me. The latter sentence is less direct, less bold, and less concise. If the writer tries to make it more concise by omitting “by me,” > My first visit to Boston will always be remembered, it becomes indefinite: is it the writer, or some person undisclosed, or the world at large, that will always remember this visit? ### Put statements in positive form expand\_more Make definite assertions. Avoid tame, colorless, hesitating, non-committal language. Use the word not as a means of denial or in antithesis, never as a means of evasion.