Accordion

Description

The accordion is a UI component that allows sections of content to expand and collapse. It is useful for presenting information in a compact way by revealing only what the user chooses to explore. Instead of displaying everything at once, the accordion keeps the interface clean and focused. This helps reduce cognitive load, supports better scanning, and lets users control how much information they want to see at any moment. By using the accordion, you can structure content in a way that feels organised and easier to navigate.

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to):

• Use when:
  • You need to present several groups of related information, but not all of it needs to be visible at once.
  • You want to reduce visual clutter and keep the page easier to scan.
  • Users may only need to access some details depending on their specific needs or interests.
  • You want to avoid long scrolling, especially on mobile devices or content-dense pages.
  • The content in each section can be understood independently from the rest.
• Avoid when:
  • The content is essential for understanding the page and should remain visible without interaction.
  • Users need to compare information across multiple sections at the same time.
  • The page only contains one section of information (in that case, display it directly).
  • Frequent opening and closing would interrupt the user’s workflow or slow them down.

Component

Properties

AccordionProperties extends PropsWithChildren<ComponentProps<'div'>> which means it includes all standard HTML attributes that can be applied to a div element.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion.	✅
children	React.ReactElement<typeof AccordionItem> | React.ReactElement<typeof AccordionItem>[]	Set of accordion items.	❌

AccordionItem Properties

AccordionItemProperties extends PropsWithChildren<ComponentProps<'details'>> which means it includes all standard HTML attributes that can be applied to a details element.

Prop	Type	Description	Optional
className	string	Custom classNames you want to apply to the accordion	✅
title	string	The accordion title.	❌
iconName	IconProperties['name']	The accordion icon name.	✅
children	React.ReactElement	The accordion content.	❌
hasDivider	boolean	Display or not a divider. Displayed by default.	✅
open	boolean	Html property. Defines the initial accordion state.	✅

Example

import { Accordion } from '@tmedxp/react-components';

const ExampleAccordion = (items) => {
  return (
    <Accordion id="accordion-simple">
      {items.map((item, key) => (
        <AccordionItem
          key={key}
          title={item.title}
          name={item.name}
          open={item.open}
          hasDivider={item.hasDivider}
          iconName={item.iconName}
        >
          <div dangerouslySetInnerHTML={{ __html: item.HTMLContent }} />
        </AccordionItem>
      ))}
    </Accordion>
  );
};

export { ExampleAccordion };