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. A user should not remain focused on an invisible link inside it. 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.
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.
