Organise content with accordions and disclosures

Separate the answer from supporting detail

The main answer, offer limitations and instructions needed to act can remain visible. Keeping panels for supporting material avoids making everyone guess where an important condition is hidden. Try the page with someone unfamiliar with its headings.

Each label should predict the content: “Documents to prepare” is more useful than “Information”. Merge overlapping panels or clarify their difference. Where people compare options, allow sections to stay open together or offer a presentation suited to comparison.

Choose native disclosure or a composed accordion

HTML details and summary provides native content disclosure. A composed accordion can follow the W3C pattern with named controls and communicated expansion state. Do not make a tiny icon the only trigger; the title should be a usable target.

Consider links to an answer, in-page search and printing. Test these uses in relevant browsers. If a link arrives at collapsed content, arrange appropriate expansion or provide a visible section from which the answer can be found.

Keep states understandable

With several open sections, readers should know what is displayed. If only one may be open, ensure switching does not cause a confusing jump. A simple disclosure should not automatically send focus into its content.

Editorial FAQs may use panels, but the questions and answers must match the published text. Include a long answer, a link within it and a translated two-line heading in testing. Collapsing content does not remove the need for fact checking or maintenance.

Example: prepare an initial enquiry

Educational example: a service page keeps the offer and essential terms visible. Supporting sections cover documents, process and follow-up questions. The reader opens “Documents to prepare”, copies the list and returns to the form. Testing checks that an emailed link helps find the list without losing the reading position.