Accordion

Overview

The accordion component allows users to show and hide content in a limited space, making it ideal for displaying and organising large amounts of content in a compact format. Users can toggle the visibility of the content by clicking on the item's header.

Basic usage

Importing the component

Import the accordion component along with its styling.

                                                        
                                                        
                                                            import { DsAccordion, DsAccordionItem } from "@coloplast/design-system";
                                                        import "@coloplast/design-system/dist/components/accordion/ds-accordion.css";
                                                        
                                                            

Example usage

Here’s how to use the accordion component with an accordion item. The item’s content is placed in the default slot of the DsAccordionItem component:

                                                        
                                                        
                                                            <DsAccordion>
                                                            <DsAccordionItem 
                                                                title="Hello world"
                                                                iconName="articles"
                                                            >
                                                                <p>Your HTML content goes here, in the default slot</p>
                                                            </DsAccordionItem>
                                                        </DsAccordion>
                                                        
                                                            

Component playground and props

Here’s an interactive example of the accordion component from Storybook. To explore and test out the props, look at the ‘Controls’ tab on the story.
Or alternatively, view the Accordion docs in Storybook.

Accessibility

Keyboard interaction

Users can navigate through the accordion titles using the Tab key. To expand or collapse a section, they can press the Space or Enter key.

Semantics

The accordion uses the native details/summary for disclosure, there may be inconsistencies across browsers/screen-readers in terms of how they announce the role and content, but typically the role will be announced as “group” and once expanded the content becomes available in the accessibility tree.

Animation

If a user has a preference for reduced motion, the component will automatically disable transitions to accommodate this preference.

Internationalisation

The component can be rendered in RTL languages, ensuring correct alignment and flow of content.

The title and content of accordion items can accommodate long text strings.

SEO

Server rendering

It’s possible to render the HTML and CSS of the accordion component server-side, as the interactive behaviour is supported by the native summary/details elements.

Semantic markup

The accordion makes use of appropriate tags for disclosure elements, ensure that you mark up the content of the accordion items to ensure the content is indexed appropriately.

Structured data

If you’re using the accordion for an FAQ, you could also provide structured data as JSON-LD to assist with the indexing of FAQ content.

The accordion component doesn’t output any FAQ microdata in the output, this is because the UI could be used for non-FAQ use cases.