Accordion

The accordion component lets users show and hide sections of related content on a page

Details vs Accordion

The former Collapse component are now two components: Accordion (this component) and Details. Both can be used to make a page easier to scan, but they differ in purpose and also in semantics.

When to use this component

An accordion can work well if the user needs to reveal and compare information that’s relevant to them. Accordions can also work well for people who use a service regularly. But be restrictive before choosing the accordion component. Test with users to decide if using an accordion outweighs the potential problems with hiding content. Only use an accordion if there’s evidence it’s helpful for the user to:

• see an overview of multiple, related sections of content
• choose to show and hide sections that are relevant to them
• look across information that might otherwise be on different pages

When not to use this component

Accordions hide content from the user. For this reason, you should only use them in specific situations and if user research supports it. Test your content without an accordion first. Well-written and structured content can remove the need to use an accordion.

• Do not use an accordion for content that all users need to see.
• Accordions work best for simple content and links.
• Do not use accordions to split up a series of questions. Use separate pages instead.
• Do not put accordions within accordions, as it will make content difficult to find.
• Do not use the accordion component if the amount of content inside will make the page slow to load.

Decide between using accordions, tabs and details

Accordions, tabs and details all work by hiding sections of content which a user can choose to reveal. Avoid using any of these components within one another. If you decide to use one of these components, consider if:

• the user needs to look at more than one section at a time – an accordion can show multiple sections at a time, unlike tabs
• the user needs to switch quickly between sections – tabs can show content without pushing other sections down the page, unlike accordions
• there are many sections of content – accordions can fit more sections as they’re arranged vertically, unlike tabs which are arranged horizontally

How it works

To create an accordion, use a <details> element with the class kth-accordion. Include a descriptive <summary> for the title, and enhance it with a script to toggle the title, indicating whether to show the content of the accordion or not. For clarity, you need to include a heading at the top of the <details> element to summarize its content.

<h2>Chapter 1</h2>
<details class="kth-accordion" open>
  <summary>Show</summary>
  <div>
    <p>Lorem ipsum</p>
  </div>
</details>

@use "@kth/style/scss/components/accordion.scss";