
```jsx
import { CAccordion } from '@coreui/react'
// or
import CAccordion from '@coreui/react/src/components/accordion/CAccordion'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="caccordion-active-item-key">
        <td className="text-primary fw-semibold">activeItemKey<a href="#caccordion-active-item-key" aria-label="CAccordion activeItemKey permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code>, <code>{`number`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The active item key.</p>
        </td>
      </tr>
      <tr id="caccordion-always-open">
        <td className="text-primary fw-semibold">alwaysOpen<a href="#caccordion-always-open" aria-label="CAccordion alwaysOpen permalink" className="anchor-link after">#</a></td>
        <td><code>{`false`}</code></td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Make accordion items stay open when another item is opened</p>
        </td>
      </tr>
      <tr id="caccordion-class-name">
        <td className="text-primary fw-semibold">className<a href="#caccordion-class-name" aria-label="CAccordion className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the base component.</p>
        </td>
      </tr>
      <tr id="caccordion-flush">
        <td className="text-primary fw-semibold">flush<a href="#caccordion-flush" aria-label="CAccordion flush permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
