In the new WMS, the accordion feature has been replaced with an updated version called details.
Both features allow you to hide content by putting it in a collapsible container. This can make text heavy pages less daunting and decrease the need to scroll, allowing users to more easily scan and choose what to read.
Knowing when to use (or avoid) this powerful tool will help you make your content more user-friendly and easier to navigate.
When to use details
- If only some users need the content
- There's a moderate amount of content under each heading
- Users know what they're looking for
When not to use details
- If most users will benefit from the content
- There's a small amount of content under each heading
- There's a lot of content under each heading
While details can be a useful tool to make a large amount of text more manageable, that text still has to be concise and broken up into digestible chunks.
Differences between details and accordions
While both the old and new version of this feature serve a similar purpose, details has a few functional and design improvements.
Example of accordions in the old WMS
Example of details in the new WMS
Goodbye subheadings
Although you can technically put headings under details, you shouldn't, because:
- They'll look strange, since headings are larger than the details title
- They won't be picked up by screen readers, table of contents, and search engines
If there's enough content to warrant subheadings, you can:
- Use another formatting feature, like tabs, where you can further break up the content with subheadings
- Make each heading its own detail box (if that makes sense for your content)
Lighter and more intuitive
The design of details is visually lighter and less obtrusive than accordions, making this feature easier to integrate in your page layouts.
The red also makes details more obviously interactive—in our testing, users didn't always realize the old accordions were clickable, and adding colour made a huge difference in that perception.
Converting legacy accordions to details
If your site had accordions in the old WMS, they will migrate to the new WMS as is. We encourage you to take advantage of the new and improved design by converting your legacy accordions to details after migration.
If your site has many accordions, Microsoft Copilot can help speed up the conversion process. Paste this prompt into a secure Copilot chat, followed by the source code for your legacy accordion, to automatically convert it to details:
Take the HTML I give you and respect the following structure. The heading will go in the summary, and the content will go in the details-wrapper. <details> <summary>Details</summary> <div <p> </p> </div> </details>
Back in the WMS, replace the code for the legacy accordion with Copilot's output, and voila! Just make sure to manually validate the final product.
