On this page
Elodia
An expand–collapse control reveals or hides a section of content. When several related sections are stacked vertically, the pattern is commonly called an accordion. It can make a long FAQ easier to scan, but hiding essential information simply to shorten a page adds work for the reader.
Treat this as a focused UI design task: decide what readers need to see, label each section clearly, and define the open and closed behavior. The shipping-and-returns example below shows how to make those choices concrete.
What an Expand–Collapse UI Does
1.1 Accordion, Header, and Content Panel
An accordion is a vertical set of headings that control associated content panels. Each heading describes what its panel contains. Activating the heading’s control reveals or hides that content without taking the reader to another page.
This works when readers usually need only one or two independent sections, such as a delivery question or a return-policy detail. It is less helpful when they need to compare every section or read a complete sequence. Reducing page height is not useful if it makes every sentence harder to reach.
1.2 When to Keep the Content Visible
Do not hide a required step, a critical warning, or the terms someone needs before making a choice merely to create a cleaner layout. A short list of three answers may be easier to read in full than as three controls that each require opening.
For shipping and returns, independent questions can work well in an accordion. A comparison of delivery methods, prices, and arrival estimates is often clearer as an always-visible comparison because readers need to look across alternatives.
How to Polish Your Expand Collapse UI
An accordion needs to communicate two things at once: what information is available and whether it is currently shown. Start with those functions before choosing animation or color.
Keep the three-part anatomy and visual principles below consistent across the whole set. Then add the behaviors that a screenshot cannot demonstrate.
Basic Elements in Expand Collapse UI
The accordion UI has three main elements, including the title or headers, icons, and panels.
- Headers: Use a specific label such as “Where can I return an order?” instead of “More information.” The heading and its control should have a clear relationship to the content beneath them.
- Icons: Use a consistent chevron or plus/minus convention to distinguish collapsed and expanded states. An item does not have to start collapsed; its icon must match the actual starting state. Make the whole header control easy to activate, not just the small icon.
- Content panel: Keep the answer directly associated with its heading. Long text, links, and lists should grow the panel without overlapping the next item. Avoid putting another primary control inside the accordion trigger itself.
Basic Principles for Expand Collapse UI Design
- Recognizable controls: Make headings look interactive, and distinguish their focus, hover, and expanded states without relying only on color.
- Consistent alignment: Place icons on the same side across the set, and align wrapped headings so the second line remains readable. Follow the reading direction of the page rather than assuming one side is universally correct.
- Clear hierarchy: Distinguish section headings from the page title and the answer text using meaningful heading levels, weight, and spacing. There is no requirement for every level to use a different font size.
- Useful symbols: An optional topic icon can support a label, but it should not compete with the expand–collapse indicator or replace the words describing the section.
- Readable color: Keep text and controls legible against their background, including disabled or expanded states. Use spacing and structure as well as color to separate the items.
Single-open or Multiple-open: Decide from the Reading Task
Suppose a shopper wants to compare “When will my order arrive?” with “Where can I return it?” Allowing both panels to stay open makes that easier. If opening one item automatically closes another, say so in the interaction specification and check that the collapsing content does not make the reader lose their place.
Start with the answer people most often need already visible if that helps them complete the task. The initial state should follow the reading task rather than a preference for a shorter page. In either case, opening an item should leave the person at the heading they activated rather than unexpectedly moving them to the top of the page.
Keyboard and State Details That Need a Specification
The W3C accordion pattern describes header controls as buttons inside appropriately leveled headings. Enter or Space activates the focused control; Tab follows the page’s normal focus order. The expanded state must be exposed programmatically and stay in sync with the visible panel.
Record the focus behavior when a panel closes. Activating its heading normally leaves focus on that control. If an external action collapses a panel while focus is inside it, move focus to an appropriate visible control; do not leave it on a now-hidden link. Do not make hover the only way to open an answer. In handoff, distinguish the animation from the actual state change so the interface remains understandable when motion is reduced.
A Shipping FAQ with Real Content
Use questions with different answer lengths: “Where do you ship?”, “When will my order arrive?”, and “Where can I return an order?” The last answer may need an address, a time limit, and a link to start a return. Those content requirements are a better layout test than three identical two-line placeholder answers.
In the narrow version, let a question wrap onto two lines while the expansion icon stays aligned. In the long-answer state, the next heading should move down naturally. If the page has a sticky header, confirm the opened question and the beginning of its answer remain visible.
Make a linked answer reachable without another search
A shopper may open the returns answer from an order-confirmation email rather than from the top of the FAQ. Give the answer a stable destination. When that direct link is followed, reveal the relevant panel and place its heading where it can be read without a sticky header covering it. An anchor that lands on a closed item leaves the reader to repeat the search that the link was meant to save.
Within the returns answer, a link may open the return form. If the person goes back to check the address or time limit, restore a useful reading position and the previously open answer. Define this behavior with the implementation team; an accordion's visual open/closed variants do not automatically preserve navigation state.
| How the reader arrives | What should be visible | What to avoid |
|---|---|---|
| First visit to the FAQ | Clear questions and the chosen initial open state | Opening every item solely to discover what it means |
| Link to the returns answer | The return question and its expanded answer | Landing behind a sticky header or on a closed panel |
| Back from the return form | A useful position with the relevant answer available | Resetting to the page top with every panel closed |
| Answer cannot finish loading | The heading, an error message and a retry action | Silently collapsing the panel or showing an empty answer |
Do not let loading or validation disappear inside the panel
If an answer must be fetched after opening, keep the panel expanded while it loads. Show the waiting state inside it; if the request fails, explain that the answer could not load and provide a retry action. Clicking the heading still controls whether the panel is open. Retrying the request is a separate action and should not also close the section.
An accordion containing form fields needs more care than a set of independent answers. If submission finds a problem in a collapsed section, reveal the relevant section and make the error discoverable. Preserve what the person already entered. If the fields must be completed in a strict sequence, a clearly labeled step-by-step form may express that dependency better than presenting the sections as optional reading.
For the shipping example, review two complete paths: open delivery and returns together to compare their conditions, then follow the return-form link and go back. On the narrow layout, use a two-line question and a long return address. The successful result is that the reader can retrieve the same answer and continue; a smooth chevron animation does not compensate for lost context.
Build and Review the Accordion in Pixso
Create a reusable FAQ item in Pixso with a heading, an expansion indicator, and an answer panel. Prepare closed and expanded variants with the same width and text styles. Use vertical Auto Layout so a longer answer pushes the next item down instead of covering it.
Place three instances on a shipping-and-returns page and replace the sample text with the real questions above. Make a narrow version alongside the desktop layout. Include a long answer and a wrapped heading; they reveal spacing problems that equal-length placeholders hide.
Connect open and closed screens or component states in a prototype, then review the single-open and multiple-open alternatives with a teammate. Ask them to find both a delivery estimate and the return location. The relevant question is whether they can keep the information they need in view, not which animation looks more impressive.
Document keyboard, focus, and accessibility requirements next to the design for implementation. A visual prototype communicates the intended interaction; it does not prove that the eventual page has the right button semantics or screen-reader behavior.
