Accordion
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Last updated
Was this helpful?
An accordion is a vertically stacked list of headers that reveal or hide associated sections of content.
Last updated
Was this helpful?
Accordion styles are not rendered while editing the article or in the agent portal. View your article in the Service Portal for an accurate depiction of your content.
There's is a known bug when pasting body content into an accordion that causes the accordion to be "open" by default. This may be desirable for the first item in a list of accordions, but it defeats the purpose if all of them are open. Read about the workaround.
The accordion component delivers large amounts of content in a small space through progressive disclosure. The header title gives the user a high-level overview of the content allowing the user to decide which sections to read.
Accordions can make information processing and discovery more effective. However, it does hide content from users and it’s important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don’t use an accordion as it adds the burden of an extra click; instead, use a full scrolling page with normal headers.
Refer to the screenshot for an example of accordions in use. Components of a sandwich are broken into individual accordions. The details of each sandwich component are inside of the accordion's body. Click the image to magnify it.
A single accordion is comprised of two parts:
The summary is also considered the title or the heading of an accordion. If using an accordion for an FAQ, the summary is where you would place the question. Refer to the image below for an example of the summary. Click the image to magnify.
The body is the bulk of your content and the impetus for using an accordion at all. If using an accordion for an FAQ, the body is where you would place your answer to the question. Refer to the image below for an example of the body section. Click the image to magnify.
Proceed to the link below to get started.
How-To Apply Accordion
