Accordion

When to use this component

Use the Accordion component to:

• allow users to focus on one section at a time
• group related filters or form controls in a compact space

When not to use this component

Do not use the accordion component for:

• content that users need to see all at once
• short content that does not need to be hidden
• critical information that must be visible by default

How it works

Installation

To install the components, go to the get started guide for developers.

To use the Accordion component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Accordion component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-accordion';

Variants

We provide templates for 2 different use cases.

Mobile navigation

Use the basic eds-c-accordion template for mobile navigation menus. This variant includes the colored strip indicator and specialized layout for navigation items.

To view all the properties of this component, go to the schema.

<section class="l-stack">
    {{#with eds-c-accordion}}
        {{> eds-c-accordion}}
    {{/with}}
</section>

Filters (composable with checkboxes)

Use the eds-c-accordion-composable-with-checkbox template for filter interfaces. This variant includes the "default" visual styling and supports checkboxes, show more/less functionality, and custom content.

To view all the properties of this component, go to the schema.

To see an example of the filter accordion variant, go to the Elements Sandbox.

Configuration

Mobile navigation usage

For mobile navigation, use the basic eds-c-accordion template with HTML content:

{{#with components.mobileAccordion}}
	{{> yourpartials/eds-c-accordion}}
{{/with}}

Example data:

{
	"id": "nav-products",
	"title": "Products",
	"iconURL": "/img/icons/eds-i-chevron-down-small.svg#eds-i-chevron-down-small",
	"headingLevel": "3",
	"open": false,
	"groupedContent": true,
	"content": "<ul><li><a href=\"/journals\">Journals</a></li><li><a href=\"/books\">Books</a></li></ul>"
}

Filter accordion usage

For filter interfaces, use the composable eds-c-accordion-composable-with-checkbox template:

{{#with components.filterAccordion}}
	{{> yourpartials/eds-c-accordion-composable-with-checkbox}}
{{/with}}

Example data:

{
	"variant": "default",
	"id": "content-filter",
	"title": "Content Type",
	"iconURL": "/img/icons/eds-i-chevron-down-small.svg#eds-i-chevron-down-small",
	"headingLevel": "2",
	"open": true,
	"groupedContent": true,
	"checkboxes": [
		{
			"inputType": "checkbox",
			"inputId": "filter-article",
			"name": "contentType",
			"value": "article",
			"label": {
				"text": "Article (664,333)",
				"for": "filter-article"
			}
		}
	]
}

Custom content with composable template

If you need to further customise the accordion with your own content, you can use the composable base template.

The eds-c-accordion-composable template has a @partial-block. Use this as a wrapper for your custom template:

{{#> yourpartials/eds-c-accordion-composable}}
	<!-- Your custom content here -->
	<ul>
		<li>Custom item 1</li>
		<li>Custom item 2</li>
	</ul>
{{/yourpartials/eds-c-accordion-composable}}

groupedContent

Set groupedContent: true when the accordion contains form controls like checkboxes or radio buttons, or when it contains navigation lists. This applies appropriate spacing and styling for grouped interactive elements.

"groupedContent": true

variant property

Use the variant property to specify visual styling variants:

• "default" - For filters, FAQs, and general content (simpler styling without mobile navigation features)
• Omit variant for mobile navigation (uses default mobile nav styling with colored strip)

"variant": "default"

Checkbox array structure

When using the checkbox variant, each checkbox object must follow the eds-c-checkbox schema:

"checkboxes": [
	{
		"inputType": "checkbox",
		"inputId": "filter-article",
		"name": "contentType",
		"value": "article",
		"label": {
			"text": "Article (664,333)",
			"for": "filter-article"
		}
	}
]

Show more / Show less button

The filter accordion variant supports progressive disclosure of lengthy content with a "Show more / "Show less" button. This is useful for filter panels or long lists where you need to show only the most relevant options initially.

Note: This feature is only available when using the filter variant (variant: "default").

How it works

Content is initially limited to a configurable height with a default of 300px. If content exceeds this threshold, the JavaScript will add a "Show more" button.
This button then switches between "Show more" and "Show less", depending on which option is currently selected.

Without JavaScript, all content is visible and no button appears.

{
	"enableShowMore": true,
	"showMoreHeight": 300,
	"showMoreText": "Show more",
	"showLessText": "Show less"
}

If enableShowMore is true, then showMoreText and showLessText are required.

Example:

{
	"id": "content-filter",
	"title": "Content Type",
	"iconURL": "/img/icons/eds-i-chevron-down-small.svg#eds-i-chevron-down-small",
	"headingLevel": "2",
	"groupedContent": true,
	"enableShowMore": true,
	"showMoreHeight": 300,
	"showMoreText": "Show more",
	"showLessText": "Show less",
	"checkboxes": [...]
}

JavaScript

To enable accordion functionality, import and initialize the component:

import {EdsCAccordion} from '@springernature/elements/components/eds-c-accordion/js/eds-c-accordion';

// Initialize all accordions on the page
const accordion = new EdsCAccordion('data-eds-c-accordion');
accordion.init();

// Or with custom options
const accordion = new EdsCAccordion('data-eds-c-accordion', {
	showMoreHeight: 250  // Override default height threshold
});
accordion.init();

Accessibility

You must configure the correct semantic heading level for section headings.

ARIA attributes (aria-expanded, aria-controls, aria-labelledby) are supported and must be used.

The component also supports keyboard navigation, clear visual focus indicators and announces state changes to assistive technology.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the #ask-elements Slack channel or the #ask-elements Teams channel.