diff --git a/packages/carbon-web-components/.storybook/main.ts b/packages/carbon-web-components/.storybook/main.ts
index 0d232c6bb51..adde7dd7345 100644
--- a/packages/carbon-web-components/.storybook/main.ts
+++ b/packages/carbon-web-components/.storybook/main.ts
@@ -20,6 +20,8 @@ const stories = glob.sync(
     // '../src/**/*.mdx',
     // '../src/**/*.stories.@(js|jsx|ts|tsx)',
     // add mdx/story files as they are being worked on
+    '../src/**/accordion.mdx',
+    '../src/**/accordion.stories.ts',
     '../src/**/breadcrumb.mdx',
     '../src/**/breadcrumb.stories.ts',
     '../src/**/combo-box.stories.ts',
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-story.ts b/packages/carbon-web-components/src/components/accordion/accordion-story.ts
deleted file mode 100644
index 285541bf1c2..00000000000
--- a/packages/carbon-web-components/src/components/accordion/accordion-story.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import { prefix } from '../../globals/settings';
-import { ACCORDION_SIZE } from './accordion';
-import './index';
-import './accordion-skeleton';
-import '../button/index';
-import storyDocs from './accordion-story.mdx';
-
-const sizes = {
-  [`Small size (${ACCORDION_SIZE.SMALL})`]: ACCORDION_SIZE.SMALL,
-  [`Medium size (${ACCORDION_SIZE.MEDIUM})`]: ACCORDION_SIZE.MEDIUM,
-  [`Large size (${ACCORDION_SIZE.LARGE})`]: ACCORDION_SIZE.LARGE,
-};
-
-export const Default = () => {
-  return html`
-    <cds-accordion>
-      <cds-accordion-item title="Section 1 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-      <cds-accordion-item title="Section 2 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-      <cds-accordion-item title="Section 3 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-      <cds-accordion-item title="Section 4 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-    </cds-accordion>
-  `;
-};
-
-Default.storyName = 'Default';
-
-export const Skeleton = (args) => {
-  const { alignment, isFlush } = args?.[`${prefix}-accordion-skeleton`] ?? {};
-  return html`
-    <cds-accordion-skeleton alignment="${alignment}" ?isFlush="${isFlush}">
-    </cds-accordion-skeleton>
-  `;
-};
-
-Skeleton.decorators = [
-  (story) => {
-    return html`<div style="width: 500px">${story()}</div>`;
-  },
-];
-
-Skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    [`${prefix}-accordion-skeleton`]: () => ({
-      alignment: select(
-        'Accordion alignment (alignment)',
-        ['start', 'end'],
-        'end'
-      ),
-      isFlush: boolean('isFlush', false),
-    }),
-  },
-};
-
-const noop = () => {};
-
-export const Playground = (args) => {
-  const {
-    disabled,
-    disableToggle,
-    onBeforeToggle = noop,
-    onToggle = noop,
-    size,
-    alignment,
-    isFlush,
-  } = args?.[`${prefix}-accordion-playground`] ?? {};
-  const handleBeforeToggle = (event: CustomEvent) => {
-    onBeforeToggle(event);
-    if (disableToggle) {
-      event.preventDefault();
-    }
-  };
-
-  return html`
-    <cds-accordion
-      @cds-accordion-item-beingtoggled="${handleBeforeToggle}"
-      @cds-accordion-item-toggled="${onToggle}"
-      size="${size}"
-      alignment="${alignment}"
-      ?isFlush="${isFlush}">
-      <cds-accordion-item ?disabled="${disabled}" title="Section 1 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-      <cds-accordion-item ?disabled="${disabled}" title="Section 2 title">
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-      <cds-accordion-item ?disabled="${disabled}" title="Section 3 title">
-        <cds-button>This is a button.</cds-button>
-      </cds-accordion-item>
-      <cds-accordion-item ?disabled="${disabled}">
-        <span slot="title">
-          <span> Section 4 title (<em>the title can be a node</em>) </span>
-        </span>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </cds-accordion-item>
-    </cds-accordion>
-  `;
-};
-
-Playground.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    [`${prefix}-accordion-playground`]: () => ({
-      alignment: select(
-        'Specify the alignment of the accordion heading title and chevron (alignment)',
-        ['start', 'end'],
-        'end'
-      ),
-      disabled: boolean(
-        'Specify whether an individual AccordionItem should be disabled (disabled)',
-        false
-      ),
-      isFlush: boolean(
-        'Specify whether Accordion text should be flush, default is false, does not work with align="start" (isFlush)',
-        false
-      ),
-      size: select(
-        'Specify the size of the Accordion (size)',
-        sizes,
-        ACCORDION_SIZE.MEDIUM
-      ),
-      disableToggle: boolean(
-        `Disable user-initiated toggle action (Call event.preventDefault() in ${prefix}-accordion-beingtoggled event)`,
-        false
-      ),
-      onBeforeToggle: action(`${prefix}-accordion-item-beingtoggled`),
-      onToggle: action(`${prefix}-accordion-item-toggled`),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Accordion',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx b/packages/carbon-web-components/src/components/accordion/accordion.mdx
similarity index 94%
rename from packages/carbon-web-components/src/components/accordion/accordion-story.mdx
rename to packages/carbon-web-components/src/components/accordion/accordion.mdx
index d1a50deca36..c9b03f60048 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
+++ b/packages/carbon-web-components/src/components/accordion/accordion.mdx
@@ -1,5 +1,8 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Meta, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} />
 
 # Accordion
 
@@ -87,4 +90,4 @@ Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
 `<cds-accordion-item open>`) and `false` means not setting the attribute (e.g.
 `<cds-accordion-item>` without `open` attribute).
 
-<Props of="cds-accordion-item" />
+<ArgsTable of="cds-accordion-item" />
diff --git a/packages/carbon-web-components/src/components/accordion/accordion.stories.ts b/packages/carbon-web-components/src/components/accordion/accordion.stories.ts
new file mode 100644
index 00000000000..d879af15836
--- /dev/null
+++ b/packages/carbon-web-components/src/components/accordion/accordion.stories.ts
@@ -0,0 +1,209 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { prefix } from '../../globals/settings';
+import { ACCORDION_SIZE } from './accordion';
+import './index';
+import '../button/index';
+
+const sizes = {
+  [`Small size (${ACCORDION_SIZE.SMALL})`]: ACCORDION_SIZE.SMALL,
+  [`Medium size (${ACCORDION_SIZE.MEDIUM})`]: ACCORDION_SIZE.MEDIUM,
+  [`Large size (${ACCORDION_SIZE.LARGE})`]: ACCORDION_SIZE.LARGE,
+};
+
+const args = {
+  alignment: 'end',
+  disabled: false,
+  isFlush: false,
+  size: ACCORDION_SIZE.MEDIUM,
+  disableToggle: false,
+};
+
+const argTypes = {
+  alignment: {
+    control: 'select',
+    description:
+      'Specify the alignment of the accordion heading title and chevron.',
+    options: ['start', 'end'],
+  },
+  disabled: {
+    control: 'boolean',
+    description:
+      'Specify whether an individual AccordionItem should be disabled.',
+  },
+  isFlush: {
+    control: 'boolean',
+    description:
+      'Specify whether Accordion text should be flush, default is false, does not work with align="start".',
+  },
+  size: {
+    control: 'select',
+    description: 'Specify the size of the Accordion.',
+    options: sizes,
+  },
+  disableToggle: {
+    control: 'boolean',
+    description: `Disable user-initiated toggle action (Call event.preventDefault() in ${prefix}-accordion-beingtoggled event).`,
+  },
+  onBeforeToggle: {
+    action: `${prefix}-accordion-item-beingtoggled`,
+  },
+  onToggle: {
+    action: `${prefix}-accordion-item-toggled`,
+  },
+};
+
+export const Default = {
+  // This story doesn't accept any args.
+  args: {},
+  argTypes: {},
+  render: () => {
+    return html`
+      <cds-accordion>
+        <cds-accordion-item title="Section 1 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 2 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 3 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 4 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+      </cds-accordion>
+    `;
+  },
+};
+
+export const Skeleton = {
+  args: {
+    alignment: args['alignment'],
+    isFlush: args['isFlush'],
+  },
+  argTypes: {
+    alignment: argTypes['alignment'],
+    isFlush: argTypes['isFlush'],
+  },
+  decorators: [
+    (story) => {
+      return html`<div style="width: 500px">${story()}</div>`;
+    },
+  ],
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: (args) => {
+    const { alignment, isFlush } = args ?? {};
+    return html`
+      <cds-accordion-skeleton alignment="${alignment}" ?isFlush="${isFlush}">
+      </cds-accordion-skeleton>
+    `;
+  },
+};
+
+const noop = () => {};
+
+export const Playground = {
+  args,
+  argTypes,
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  render: (args) => {
+    const {
+      disabled,
+      disableToggle,
+      onBeforeToggle = noop,
+      onToggle = noop,
+      size,
+      alignment,
+      isFlush,
+    } = args ?? {};
+    const handleBeforeToggle = (event: CustomEvent) => {
+      onBeforeToggle(event);
+      if (disableToggle) {
+        event.preventDefault();
+      }
+    };
+
+    return html`
+      <cds-accordion
+        @cds-accordion-item-beingtoggled="${handleBeforeToggle}"
+        @cds-accordion-item-toggled="${onToggle}"
+        size="${size}"
+        alignment="${alignment}"
+        ?isFlush="${isFlush}">
+        <cds-accordion-item ?disabled="${disabled}" title="Section 1 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item ?disabled="${disabled}" title="Section 2 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item ?disabled="${disabled}" title="Section 3 title">
+          <cds-button>This is a button.</cds-button>
+        </cds-accordion-item>
+        <cds-accordion-item ?disabled="${disabled}">
+          <span slot="title">
+            <span> Section 4 title (<em>the title can be a node</em>) </span>
+          </span>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+      </cds-accordion>
+    `;
+  },
+};
+
+const meta = {
+  title: 'Components/Accordion',
+};
+
+export default meta;