Accordions are created by using multiple sequential “details” blocks, and work well when they all contain distinct but similar information.
In general, the content within an accordion should be divided into similar-sized segments, if your accordion includes 250 words in one section and 25 in another, please reconsider your content. Accordions are a mechanism that empowers visitors to skim the headings on a page and drill into the section that is relevant to them.
Use accordions sparingly
Accordions hide content and make pages difficult to skim. Visitors are required interact with the page to consume your content, and interactions erode a visitor’s attention span.
Carefully phrase headings
Since your visitors are unable to see what’s behind the accordion, it is critical that the headings are concise, accurate, and resonate with the reader.
Use similar but distinct content
Ensure that the content within each accordion section is similar but distinct. Avoid repetition, and make accordions thematic.
Limit accordions to 7 sections
Most humans can process around 7 options when making a choice. Limiting the sections makes the accordion easier to use for our fellow humans.