Accordion
An accordion is an interactive element that makes it possible to display a lot of content in a space-saving, structured way.
Structure
The accordion consists of a list of headings under which the associated text is hidden by default. When clicking on a heading, the corresponding text is shown - or hidden in case the accordion was open. Icons next to each heading indicate the possibility of interaction.
Use case
Accordions can be used wherever there is too much content for plain text blocks, but at the same time too little content for a separate page. FAQ sections are therefore often solved with accordions. This allows the user to easily skim the headings without being distracted by the answers, as the structure of the accordion reduces the cognitive load on the user.
Best practice
As the accordion allows the user to skim the text, the headings in the accordion should be written as short and simple as possbile. This means: The best approach for the content of the accordion is to use clear, simple language in easily digestible chunks.
In terms of quantity, about two sentences or a maximum of 100 characters for the heading and a maximum of 400 characters for the answer in the body are recommended.
Less is more
Avoid large amounts of text