Develop

Styles

The accordion can leverage <details> and <summary> elements, providing built-in expand/collapse behavior without JavaScript.

<details class="tng-accordion">
  <summary class="tng-accordion-trigger">
    <span>Accordion title</span>
    <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
  </summary>
  <p class="tng-text-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</details>

Default
Contrast

Accordion title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Elements

Icon

Add an icon before the title for visual context.

<details class="tng-accordion">
  <summary class="tng-accordion-trigger">
    <i class="tng-icon icon-profile" aria-hidden="true"></i>
    <span>Account details</span>
    <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
  </summary>
  <p class="tng-text-body">
    Manage your account settings and preferences.
  </p>
</details>

Default
Contrast

Account details

Manage your account settings and preferences.

Modules

Accordion group

Multiple accordions can be stacked using our flex layout, optionally adding a divider.

<div class="tng-stack gap-3xl | tng-has-dividers">
  <details class="tng-accordion" open>
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-profile" aria-hidden="true"></i>
      <span>Personal information</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Your personal information is kept private and secure.
    </p>
  </details>
  <details class="tng-accordion">
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-settings" aria-hidden="true"></i>
      <span>Settings</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Configure your preferences and settings.
    </p>
  </details>
  <details class="tng-accordion">
    <summary class="tng-accordion-trigger">
      <i class="tng-icon icon-info" aria-hidden="true"></i>
      <span>Help & Support</span>
      <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
    </summary>
    <p class="tng-text-body">
      Get help with common issues and contact support.
    </p>
  </details>
</div>

Default
Contrast

Personal information

Your personal information is kept private and secure.

Settings

Configure your preferences and settings.

Help & Support

Get help with common issues and contact support.

React

Import the Accordion and AccordionItem components from @tmedxp/react-components.

Properties

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

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.	❌
`hasDivider`	`boolean`	Display or not a divider. Displayed by default.	✅

AccordionItem properties

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

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.	❌
`open`	`boolean`	HTML property. Defines the initial accordion state.	✅

Example

import { Accordion, AccordionItem } 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 };