# Accordion

An accordion groups sections of related content that can be opened and closed. Accordions decrease cognitive load by letting people choose which sections they see, such as questions in an FAQ.

## Best practices

### Do

- Clearly label each section with a descriptive title that accurately reflects its content.
- Organize sections logically, grouping related actions or subject matter together.

### Don't

- Use vague or ambiguous section titles.
- Nest collapsible sections too deeply, which can create a confusing user experience.

## Behavior and states

- By default, accordion items are closed.
- Open a specific item by default only when that information needs immediate prominence.
- Use single-item expansion by default. Allow multiple open items only when the result will not feel overwhelming.
- Do not place information in one panel that must be referenced while using another panel.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-accordion--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Default = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### Accordion API

Define a styled Accordion, using the `useAccordion_unstable` and `useAccordionStyles_unstable` hooks.

```ts
interface AccordionProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Indicates if Accordion support multiple Panels closed at the same time.
   */
  collapsible?: boolean;

  /**
   * Default value for the uncontrolled state of the panel.
   */
  defaultOpenItems?: unknown;

  /**
   * Indicates if Accordion support multiple Panels opened at the same time.
   */
  multiple?: boolean;

  /**
   * @deprecated Arrow keyboard navigation is not recommended for accordions. Consider using Tree if arrow navigation is a hard requirement.
   * Indicates if keyboard navigation is available and gives two options, linear or circular navigation.
   */
  navigation?: "linear" | "circular";

  /**
   * Callback to be called when the opened items change.
   */
  onToggle?: AccordionToggleEventHandler<unknown>;

  /**
   * Controls the state of the panel.
   */
  openItems?: unknown;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

### AccordionHeader API

Define a styled AccordionHeader, using the `useAccordionHeader_unstable` and `useAccordionHeaderStyles_unstable`
hooks.

```ts
interface AccordionHeaderProps {
  as?: "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

  /**
   * The component to be used as button in heading
   */
  button?: NonNullable<WithSlotShorthandValue<ARIAButtonSlotProps<"a">> | null>;

  children?: any;

  className?: string;

  /**
   * Expand icon slot rendered before (or after) children content in heading.
   */
  expandIcon?: WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * The position of the expand  icon slot in heading.
   */
  expandIconPosition?: "start" | "end";

  /**
   * Expand icon slot rendered before (or after) children content in heading.
   */
  icon?: WithSlotShorthandValue<{ as?: "div"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null; }, "children"> & { children?: any; }> | null | undefined;

  /**
   * Indicates if the AccordionHeader should be rendered inline.
   */
  inline?: boolean;

  ref?: Ref<HTMLDivElement>;

  /**
   * Size of spacing in the heading.
   */
  size?: "small" | "medium" | "large" | "extra-large";

  style?: CSSProperties;
}
```

### AccordionItem API

Define a styled AccordionItem, using the `useAccordionItem_unstable` and `useAccordionItemStyles_unstable` hooks.

```ts
interface AccordionItemProps {
  as?: "div";

  children?: any;

  className?: string;

  /**
   * Disables opening/closing of panel.
   */
  disabled?: boolean;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;

  /**
   * Required value that identifies this item inside an Accordion component.
   */
  value: unknown;
}
```

### AccordionPanel API

Define a styled AccordionPanel, using the `useAccordionPanel_unstable` and `useAccordionPanelStyles_unstable` hooks.

```ts
interface AccordionPanelProps {
  as?: "div";

  children?: any;

  className?: string;

  collapseMotion?: PresenceMotionSlotProps<CollapseParams> | null;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Accordion Card

Source: CoreAI.

Add a border and restore header and panel padding to present an accordion as a card-like
disclosure without introducing a separate Card component.

[Download source](/coreai-design-system/source/examples/components-accordion--accordion-card.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const AccordionCard = () => {
    const styles = /* css */ `
      .accordion-card-example {
        background-color: var(--colorNeutralBackground1);
        border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
        border-radius: var(--borderRadiusXLarge);
        max-width: 100%;
        overflow: hidden;
        width: 30rem;
      }

      .accordion-card-example__header-button.fui-AccordionHeader__button {
        padding-inline: var(--spacingHorizontalL);
      }

      .accordion-card-example__body {
        display: grid;
        padding: var(--spacingVerticalM) var(--spacingHorizontalL);
        row-gap: var(--spacingVerticalS);
        border-top: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
      }

      .accordion-card-example__body-copy {
        margin: 0;
      }
    `;
    return (<>
        <style>{styles}</style>
        <Accordion className="accordion-card-example" collapsible defaultOpenItems="evaluation-details">
          <AccordionItem value="evaluation-details">
            <AccordionHeader button={{ className: 'accordion-card-example__header-button' }}>
              Evaluation details
            </AccordionHeader>
            <AccordionPanel className="accordion-card-example__body">
              <p className="accordion-card-example__body-copy">
                Review the configuration and results for this evaluation before sharing it with your
                team.
              </p>
              <p className="accordion-card-example__body-copy">
                The evaluation uses the latest version of the customer-support dataset.
              </p>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
      </>);
};

export default AccordionCard;
```

## Collapsible

Source: Fluent, adapted for CoreAI.

An accordion can have multiple panels collapsed at the same time.

[Download source](/coreai-design-system/source/examples/components-accordion--collapsible.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Collapsible = (): JSXElement => (<Accordion collapsible>
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default Collapsible;
```

## Content Alignment Dev

Source: CoreAI.

Shows an open accordion aligned with content in the same vertical stack.

[Download source](/coreai-design-system/source/examples/components-accordion--content-alignment-dev.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
export const ContentAlignmentDev = () => {
    const details = [
        ['Model', 'gpt-4.1-mini'],
        ['Project', 'Customer operations'],
        ['Status', 'Draft'],
    ];
    const styles = /* css */ `
      .accordion-alignment-example {
        display: grid;
        width: 30rem;
        max-width: 100%;
        row-gap: var(--spacingVerticalM);
      }

      .accordion-alignment-example__heading {
        margin: 0;
      }

      .accordion-alignment-example__details {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: var(--spacingHorizontalXXL);
        row-gap: var(--spacingVerticalS);
        margin: 0;
      }

      .accordion-alignment-example__details dd {
        margin: 0;
      }

      .accordion-alignment-example__panel-content {
        padding-block: var(--spacingVerticalS);
      }
    `;
    return (<>
        <style>{styles}</style>
        <section className="accordion-alignment-example" aria-labelledby="components-accordion--content-alignment-dev-applied-to-heading">
          <h2 id="components-accordion--content-alignment-dev-applied-to-heading" className="accordion-alignment-example__heading">
            Applied to
          </h2>
          <dl className="accordion-alignment-example__details">
            {details.map(([label, value]) => (<React.Fragment key={label}>
                <dt>{label}</dt>
                <dd>{value}</dd>
              </React.Fragment>))}
          </dl>
          <Accordion collapsible defaultOpenItems={['checks']}>
            <AccordionItem value="checks">
              <AccordionHeader>Input checks (3)</AccordionHeader>
              <AccordionPanel>
                <div className="accordion-alignment-example__panel-content">
                  Prompt injection, sensitive data, and request limits
                </div>
              </AccordionPanel>
            </AccordionItem>
          </Accordion>
        </section>
      </>);
};

export default ContentAlignmentDev;
```

## Controlled

Source: Fluent, adapted for CoreAI.

An accordion can be controlled, to ensure `multiple` and `collapsible` you should use `openItems` provided through `onToggle` callback.

[Download source](/coreai-design-system/source/examples/components-accordion--controlled.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { AccordionToggleEventHandler } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";

export const Controlled = (): JSXElement => {
    const [openItems, setOpenItems] = React.useState(['1']);
    const handleToggle: AccordionToggleEventHandler<string> = (event, data) => {
        setOpenItems(data.openItems);
    };
    return (<Accordion openItems={openItems} onToggle={handleToggle} multiple collapsible>
      <AccordionItem value="1">
        <AccordionHeader>Accordion Header 1</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 1</div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="2">
        <AccordionHeader>Accordion Header 2</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 2</div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value="3">
        <AccordionHeader>Accordion Header 3</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 3</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>);
};

export default Controlled;
```

## Disabled

Source: Fluent, adapted for CoreAI.

An accordion item can be `disabled`

[Download source](/coreai-design-system/source/examples/components-accordion--disabled.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Disabled = (): JSXElement => (<Accordion>
    <AccordionItem disabled value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem disabled value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem disabled value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default Disabled;
```

## Expand Icon

Source: Fluent, adapted for CoreAI.

An accordion item can have a custom expand icon.

[Download source](/coreai-design-system/source/examples/components-accordion--expand-icon.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import * as React from 'react';
import type { AccordionToggleEventHandler } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { Subtract20Filled } from "@fluentui/react-icons";
import { Add20Filled } from "@fluentui/react-icons";
import { AccordionPanel } from "@coreai-ds/react-components";

export const ExpandIcon = (): JSXElement => {
    const [openItem, setOpenItems] = React.useState(0);
    const handleToggle = React.useCallback<AccordionToggleEventHandler>((_, data) => {
        setOpenItems(data.value as number);
    }, []);
    return (<Accordion onToggle={handleToggle} openItems={openItem}>
      <AccordionItem value={1}>
        <AccordionHeader expandIcon={openItem === 1 ? <Subtract20Filled /> : <Add20Filled />}>
          Accordion Header 1
        </AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 1</div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value={2}>
        <AccordionHeader expandIcon={openItem === 2 ? <Subtract20Filled /> : <Add20Filled />}>
          Accordion Header 2
        </AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 2</div>
        </AccordionPanel>
      </AccordionItem>
      <AccordionItem value={3}>
        <AccordionHeader expandIcon={openItem === 3 ? <Subtract20Filled /> : <Add20Filled />}>
          Accordion Header 3
        </AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel 3</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>);
};

export default ExpandIcon;
```

## Expand Icon Position

Source: Fluent, adapted for CoreAI.

The expand icon can be placed at the `start` or `end` of the accordian header.

[Download source](/coreai-design-system/source/examples/components-accordion--expand-icon-position.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const ExpandIconPosition = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader expandIconPosition="end">Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader expandIconPosition="start">Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default ExpandIconPosition;
```

## Heading Levels

Source: Fluent, adapted for CoreAI.

An accordion header is a `<div>` by default, but according to [WAI-ARIA specification](https://www.w3.org/TR/wai-aria-practices/#wai-aria-roles-states-and-properties), we recommend using a proper heading of any level in markup.

[Download source](/coreai-design-system/source/examples/components-accordion--heading-levels.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const HeadingLevels = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader as="h1">Accordion Header as h1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader as="h2">Accordion Header as h2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader as="h3">Accordion Header as h3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="4">
      <AccordionHeader as="h4">Accordion Header as h4</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 4</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default HeadingLevels;
```

## Inline

Source: Fluent, adapted for CoreAI.

An accordion header can be set to `inline`

[Download source](/coreai-design-system/source/examples/components-accordion--inline.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Inline = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader inline>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader inline>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader inline>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default Inline;
```

## Motion Custom

Source: Fluent, adapted for CoreAI.

`AccordionPanel`'s `collapseMotion` slot can directly take `Collapse` props, such as `duration`, `easing`, `animateOpacity` and others.

The `collapseMotion` slot also supports the `children` render function, which allows replacing the default `Collapse` with a custom implementation. This story demonstrates the simpler direct prop approach:

```tsx
<AccordionPanel collapseMotion={{ duration, easing, animateOpacity }}>
```

[Download source](/coreai-design-system/source/examples/components-accordion--motion-custom.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { tokens } from "@coreai-ds/react-components";
import * as React from 'react';
import { Persona } from "@coreai-ds/react-components";
import type { PersonaProps } from "@coreai-ds/react-components";
import { motionTokens } from "@coreai-ds/react-components";
import { Field } from "@coreai-ds/react-components";
import { Slider } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";

const useStyles = makeStyles({
    controls: {
        display: 'flex',
        flexDirection: 'column',
        gap: tokens.spacingVerticalS,
        marginBottom: tokens.spacingVerticalL,
        padding: tokens.spacingVerticalM,
        border: `${tokens.strokeWidthThicker} solid ${tokens.colorNeutralForeground3}`,
        borderRadius: tokens.borderRadiusMedium,
    },
    list: {
        display: 'flex',
        flexDirection: 'column',
        gap: tokens.spacingVerticalM,
        padding: `${tokens.spacingVerticalS} 0`,
    },
});

const personaData = [
    {
        name: 'Kevin Sturgis',
        image: 'persona-male.png',
        status: 'available' as const,
        useImage: true,
        secondaryText: 'Available',
    },
    { name: 'Sarah Chen', status: 'busy' as const, useImage: false, secondaryText: 'In a meeting' },
    {
        name: 'Jessica Brown',
        image: 'persona-female.png',
        status: 'busy' as const,
        useImage: true,
        secondaryText: 'Do not disturb',
    },
    { name: 'Emily Johnson', status: 'available' as const, useImage: false, secondaryText: 'Available' },
    { name: 'David Kim', status: 'offline' as const, useImage: false, secondaryText: 'Offline' },
    {
        name: 'Michael Rodriguez',
        image: 'persona-male.png',
        status: 'away' as const,
        useImage: true,
        secondaryText: 'Away',
    },
];

const avatarFor = (useImage?: boolean, image?: string): PersonaProps['avatar'] => useImage
    ? {
        image: {
            src: `https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/${image}`,
        },
    }
    : { color: 'colorful' };

export const MotionCustom = (): JSXElement => {
    const classes = useStyles();
    const [duration, setDuration] = React.useState(1000);
    const [animateOpacity, setAnimateOpacity] = React.useState(true);
    const renderList = (items: typeof personaData) => (<div className={classes.list}>
      {items.map(item => (<Persona key={item.name} name={item.name} secondaryText={item.secondaryText} presence={{ status: item.status }} avatar={avatarFor(item.useImage, item.image)}/>))}
    </div>);
    const easing = motionTokens.curveDecelerateMid;
    return (<>
      <div className={classes.controls}>
        <Field label={`Duration: ${duration}ms`}>
          <Slider min={100} max={2000} step={50} value={duration} onChange={(_, data) => setDuration(data.value)}/>
        </Field>
        <Switch label="Animate opacity" checked={animateOpacity} onChange={(_, data) => setAnimateOpacity(data.checked)}/>
      </div>

      <Accordion collapsible>
        <AccordionItem value="1">
          <AccordionHeader>Team A</AccordionHeader>
          <AccordionPanel collapseMotion={{ duration, easing, animateOpacity }}>
            {renderList(personaData.slice(0, 3))}
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="2">
          <AccordionHeader>Team B</AccordionHeader>
          <AccordionPanel collapseMotion={{ duration, easing, animateOpacity }}>
            {renderList(personaData.slice(3))}
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem value="3">
          <AccordionHeader>Team C</AccordionHeader>
          <AccordionPanel collapseMotion={{ duration, easing, animateOpacity }}>
            {renderList(personaData)}
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    </>);
};

export default MotionCustom;
```

## Multiple

Source: Fluent, adapted for CoreAI.

An accordion supports multiple panels expanded simultaneously. Since it's not simple to determine which panel will be opened by default, `multiple` will also be collapsed by default on the first render

[Download source](/coreai-design-system/source/examples/components-accordion--multiple.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Multiple = (): JSXElement => (<Accordion multiple>
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default Multiple;
```

## Open Items

Source: Fluent, adapted for CoreAI.

An accordion can have defined open items. If no open item is present, all panels will be closed by default

[Download source](/coreai-design-system/source/examples/components-accordion--open-items.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const OpenItems = (): JSXElement => (<Accordion defaultOpenItems="1">
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default OpenItems;
```

## Sizes

Source: Fluent, adapted for CoreAI.

AccordionHeader supports `small`, `medium`, `large` and `extra-large` sizes.

[Download source](/coreai-design-system/source/examples/components-accordion--sizes.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const Sizes = (): JSXElement => (<>
    <Accordion collapsible>
      <AccordionItem value="1">
        <AccordionHeader size="small">Small Header</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
    <Accordion collapsible>
      <AccordionItem value="1">
        <AccordionHeader size="medium">Medium Header</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
    <Accordion collapsible>
      <AccordionItem value="1">
        <AccordionHeader size="large">Large Header</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
    <Accordion collapsible>
      <AccordionItem value="1">
        <AccordionHeader size="extra-large">Extra-Large Header</AccordionHeader>
        <AccordionPanel>
          <div>Accordion Panel</div>
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  </>);

export default Sizes;
```

## With Icon

Source: Fluent, adapted for CoreAI.

An accordion header can contain an icon.

[Download source](/coreai-design-system/source/examples/components-accordion--with-icon.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Accordion } from "@coreai-ds/react-components";
import { AccordionItem } from "@coreai-ds/react-components";
import { AccordionHeader } from "@coreai-ds/react-components";
import { RocketRegular } from "@fluentui/react-icons";
import { AccordionPanel } from "@coreai-ds/react-components";
import * as React from 'react';

export const WithIcon = (): JSXElement => (<Accordion>
    <AccordionItem value="1">
      <AccordionHeader icon={<RocketRegular />}>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader icon={<RocketRegular />}>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader icon={<RocketRegular />}>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>);

export default WithIcon;
```

## Resources

- [Figma component](https://www.figma.com/design/eXfSQrRg3poHRgmr0ivN5V/CoreAI-Figma-Library?node-id=113348-3337)
- [Fluent guidance](https://fluent2.microsoft.design/components/web/react/core/accordion/usage)