> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 6f8e1e54-6184-4c6f-a343-6616f6039ec5
---

# Accordion

> Learn about the accordion component for use in UI extensions.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

The `Accordion` component renders an expandable and collapsable section that can contain other components. This component can be helpful for saving space and breaking up extension content.

<Frame>
  <img width="375" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023_2024/ui-extensions-accordion-section.png" alt="ui-extensions-accordion-section" />
</Frame>

```jsx theme={null}
import { Accordion, Text } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <>
      <Accordion title="Item One">
        <Text>
          Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and
          nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of
          the world.
        </Text>
      </Accordion>
      <Accordion title="Item Two">
        <Text>Second inner text</Text>
      </Accordion>
    </>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="Accordion">
  <ComponentProp name="children" required={true} type={<><code>ReactNode</code></>} description={<>The main content of the accordion when it opens.</>} />

  <ComponentProp name="title" required={true} type={<><code>string</code></>} description={<>The accordion&#39;s title text.</>} />

  <ComponentProp name="defaultOpen" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, the accordion will be open on initial page load. The <code>open</code> prop takes precedence over this prop.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="disabled" required={false} type={<><code>boolean</code></>} description={<>When set to <code>true</code>, the accordion&#39;s state cannot be changed.</>} defaultValue={<><code>false</code></>} />

  <ComponentProp name="onClick" required={false} type={<><code>() =&gt; void</code></>} description={<>A function that will be invoked when the accordion title is clicked. This function receives no arguments and its returned value is ignored.</>} />

  <ComponentProp name="open" required={false} type={<><code>boolean</code></>} description={<>Controls the accordion&#39;s open state programmatically. When set to <code>true</code>, the accordion will open. Takes precedence over <code>defaultOpen</code>.</>} />

  <ComponentProp name="size" required={false} type={<><code>&quot;extra-small&quot;</code> | <code>&quot;md&quot;</code> | <code>&quot;medium&quot;</code> | <code>&quot;sm&quot;</code> | <code>&quot;small&quot;</code> | <code>&quot;xs&quot;</code></>} description={<>The size of the accordion title.</>} defaultValue={<><code>&quot;small&quot;</code></>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />
</ComponentProps>

## Related components

* [Box](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/box)
* [Divider](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/divider)
* [Heading](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/heading)