Accordions are created by using multiple sequential “details” blocks, and work well when they all contain distinct but similar information.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n 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.<\/p>\n<\/details>\n\n\n\n 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.<\/p>\n<\/details>\n\n\n\n Ensure that the content within each accordion section is similar but distinct. Avoid repetition, and make accordions thematic.<\/p>\n<\/details>\n\n\n\n Most humans can process around 7 options when making a choice. Limiting the sections makes the accordion easier to use for our fellow humans.<\/p>\n<\/details>\n\n\n\nUse accordions sparingly<\/summary>\n
Carefully phrase headings<\/summary>\n
Use similar but distinct content<\/summary>\n
Limit accordions to 7 sections<\/summary>\n