diff --git a/docs/src/Module.doc.js b/docs/src/Module.doc.js
index 1b9182aa424..ff08250252f 100644
--- a/docs/src/Module.doc.js
+++ b/docs/src/Module.doc.js
@@ -36,6 +36,16 @@ card(
         type: 'string',
         required: true,
       },
+      {
+        name: 'extExpandedId',
+        type: '?string',
+        required: false,
+      },
+      {
+        name: 'setExtExpandedId',
+        type: '(?string) => void',
+        required: false,
+      },
       {
         name: 'items',
         type:
@@ -159,4 +169,65 @@ function ModuleExample4() {
   />
 );
 
+card(
+  <Example
+    name="Multiple items with external control"
+    defaultCode={`
+function ModuleExample5() {
+  const [extExpandedId, setExtExpandedId] = React.useState(null);
+  return (
+    <Box maxWidth={800} padding={2} column={12}>
+      <Box display="flex" paddingY={2}>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-0"? "collapse 1": "expand 1"}
+            onClick={() => extExpandedId === "ModuleExample5-0"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-0")}
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-1"? "collapse 2": "expand 2"}
+            onClick={() => extExpandedId === "ModuleExample5-1"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-1")}
+          />
+        </Box>
+        <Box paddingX={2}>
+          <Button
+            size="sm"
+            text={extExpandedId === "ModuleExample5-2"? "collapse 3": "expand 3"}
+            onClick={() => extExpandedId === "ModuleExample5-2"? setExtExpandedId("-1"): setExtExpandedId("ModuleExample5-2")}
+          />
+        </Box>
+      </Box>
+      <Module.Expandable
+        id="ModuleExample5"
+        accessibilityExpandLabel="Expand the module"
+        accessibilityCollapseLabel="Collapse the module"
+        extExpandedId={extExpandedId}
+        setExtExpandedId={setExtExpandedId}
+        items={[
+          {
+            title: 'Title1',
+            summary: ['summary1'],
+            children: <Text size="md">Children1</Text>,
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: <Text size="md">Children2</Text>,
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: <Text size="md">Children3</Text>,
+          }]}>
+      </Module.Expandable>
+    </Box>
+  );
+}
+`}
+  />
+);
+
 export default cards;
diff --git a/packages/gestalt/src/ModuleExpandable.flowtest.js b/packages/gestalt/src/ModuleExpandable.flowtest.js
index ba2c7329189..c6bc606c797 100644
--- a/packages/gestalt/src/ModuleExpandable.flowtest.js
+++ b/packages/gestalt/src/ModuleExpandable.flowtest.js
@@ -7,6 +7,8 @@ const Valid = (
     id="uniqueTestID"
     accessibilityExpandLabel="click to expand"
     accessibilityCollapseLabel="click to collapse"
+    extExpandedId="uniqueTestID-0"
+    setExtExpandedId={() => {}}
     items={[
       {
         title: 'Title',
diff --git a/packages/gestalt/src/ModuleExpandable.js b/packages/gestalt/src/ModuleExpandable.js
index 51ea4501bf8..1e07cc0aa5e 100644
--- a/packages/gestalt/src/ModuleExpandable.js
+++ b/packages/gestalt/src/ModuleExpandable.js
@@ -9,6 +9,8 @@ type Props = {|
   id: string,
   accessibilityExpandLabel: string,
   accessibilityCollapseLabel: string,
+  extExpandedId?: ?string,
+  setExtExpandedId?: (?string) => void,
   items: Array<{|
     title: string,
     icon?: $Keys<typeof icons>,
@@ -23,9 +25,13 @@ export default function ModuleExpandable({
   id,
   accessibilityExpandLabel,
   accessibilityCollapseLabel,
+  extExpandedId,
+  setExtExpandedId,
   items,
 }: Props): Node {
-  const [expandedId, setExpandedId] = useState(-1);
+  const [localExpandedId, setLocalExpandedId] = useState(null);
+  const expandedId = extExpandedId || localExpandedId;
+  const setExpandedId = setExtExpandedId || setLocalExpandedId;
 
   return (
     <Box rounding={2} borderStyle="shadow">
@@ -42,13 +48,13 @@ export default function ModuleExpandable({
                 icon={icon}
                 iconAccessibilityLabel={iconAccessibilityLabel}
                 summary={summary}
-                isCollapsed={expandedId !== index}
+                isCollapsed={expandedId !== `${id}-${index}`}
                 type={type}
                 accessibilityExpandLabel={accessibilityExpandLabel}
                 accessibilityCollapseLabel={accessibilityCollapseLabel}
-                onModuleClicked={(isExpanded) =>
-                  setExpandedId(isExpanded ? -1 : index)
-                }
+                onModuleClicked={(isExpanded) => {
+                  setExpandedId(isExpanded ? null : `${id}-${index}`);
+                }}
               >
                 {children}
               </ModuleExpandableBase>
diff --git a/packages/gestalt/src/ModuleExpandable.jsdom.test.js b/packages/gestalt/src/ModuleExpandable.jsdom.test.js
index eae11276822..64e64089e46 100644
--- a/packages/gestalt/src/ModuleExpandable.jsdom.test.js
+++ b/packages/gestalt/src/ModuleExpandable.jsdom.test.js
@@ -74,4 +74,33 @@ describe('ModuleExpandable', () => {
     expect(screen.queryByText(/Children2/i)).toBeNull();
     expect(screen.getByText(/Children3/i)).toBeInTheDocument();
   });
+
+  it('should expand the module correctly with extExpandedId', () => {
+    const newProps = {
+      ...props,
+      extExpandedId: 'uniqueTestID-0',
+      setExtExpandedId: jest.fn(),
+    };
+    render(<ModuleExpandable {...newProps} />);
+
+    // Item 1 is default to be expanded
+    expect(screen.getByText(/Children1/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Children2/i)).toBeNull();
+    expect(screen.queryByText(/Children3/i)).toBeNull();
+
+    // Click on Item 1 to collapse the item
+    const button1 = screen.getByRole('button', {
+      name: /click to collapse/i,
+    });
+    fireEvent.click(button1);
+    expect(newProps.setExtExpandedId).toHaveBeenCalledWith(null);
+
+    // Click on Item 2 to expand it
+    const expandButtons = screen.getAllByRole('button', {
+      name: /click to expand/i,
+    });
+    expect(expandButtons).toHaveLength(2);
+    fireEvent.click(expandButtons[0]);
+    expect(newProps.setExtExpandedId).toHaveBeenCalledWith('uniqueTestID-1');
+  });
 });
diff --git a/packages/gestalt/src/ModuleExpandable.test.js b/packages/gestalt/src/ModuleExpandable.test.js
index 344a0fd32cd..6d61a2e4189 100644
--- a/packages/gestalt/src/ModuleExpandable.test.js
+++ b/packages/gestalt/src/ModuleExpandable.test.js
@@ -53,3 +53,36 @@ test('renders correctly with multiple items', () => {
     .toJSON();
   expect(tree).toMatchSnapshot();
 });
+
+test('renders correctly with multiple items with extExpandedId', () => {
+  const tree = renderer
+    .create(
+      <ModuleExpandable
+        id="uniqueTestID"
+        accessibilityExpandLabel="click to expand"
+        accessibilityCollapseLabel="click to collapse"
+        extExpandedId="uniqueTestID-0"
+        setExtExpandedId={() => {}}
+        items={[
+          {
+            title: 'Title1',
+            summary: ['summary1'],
+            children: 'Children1',
+          },
+          {
+            title: 'Title2',
+            summary: ['summary2'],
+            children: 'Children2',
+          },
+          {
+            title: 'Title3',
+            summary: ['summary3'],
+            children: 'Children3',
+            type: 'error',
+          },
+        ]}
+      />
+    )
+    .toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap b/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
index bf792b2538c..129a1934901 100644
--- a/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
+++ b/packages/gestalt/src/__snapshots__/ModuleExpandable.test.js.snap
@@ -273,6 +273,270 @@ exports[`renders correctly with multiple items 1`] = `
 </div>
 `;
 
+exports[`renders correctly with multiple items with extExpandedId 1`] = `
+<div
+  className="box rounding2 shadow"
+>
+  <div
+    className="box"
+  >
+    <div
+      aria-controls="uniqueTestID-0"
+      aria-disabled={false}
+      aria-expanded={true}
+      aria-label="click to collapse"
+      className="hideOutline tapTransition rounding0 accessibilityOutline fullWidth pointer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onContextMenu={[Function]}
+      onFocus={[Function]}
+      onKeyPress={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="box paddingX6 paddingY6 xsDisplayFlex"
+      >
+        <div
+          className="box flexGrow itemsBaseline marginEnd6 xsDisplayFlex"
+        >
+          <div
+            className="box xsCol12 xsDisplayFlex"
+          >
+            <div
+              className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
+              title="Title1"
+            >
+              Title1
+            </div>
+          </div>
+        </div>
+        <div
+          className="box"
+          id="uniqueTestID-0"
+        >
+          <div
+            className="box paddingX1 paddingY1"
+          >
+            <svg
+              aria-hidden={null}
+              aria-label="click to collapse"
+              className="icon darkGray iconBlock"
+              height="12"
+              role="img"
+              viewBox="0 0 24 24"
+              width="12"
+            >
+              <path
+                d="test-file-stub"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="box marginTopN6 paddingX6 paddingY6"
+    >
+      Children1
+    </div>
+  </div>
+  <hr
+    className="divider"
+  />
+  <div
+    className="box"
+  >
+    <div
+      aria-controls="uniqueTestID-1"
+      aria-disabled={false}
+      aria-expanded={false}
+      aria-label="click to expand"
+      className="hideOutline tapTransition rounding0 accessibilityOutline fullWidth pointer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onContextMenu={[Function]}
+      onFocus={[Function]}
+      onKeyPress={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="box paddingX6 paddingY6 xsDisplayFlex"
+      >
+        <div
+          className="box flexGrow itemsBaseline marginEnd6 xsDisplayFlex"
+        >
+          <div
+            className="box xsCol6 xsDisplayFlex"
+          >
+            <div
+              className="Text fontSize3 darkGray alignLeft breakWord fontWeightBold truncate"
+              title="Title2"
+            >
+              Title2
+            </div>
+          </div>
+          <div
+            className="box marginStart6 xsCol6"
+          >
+            <div
+              className="box marginBottom0"
+            >
+              <div
+                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
+                title="summary2"
+              >
+                summary2
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="box"
+          id="uniqueTestID-1"
+        >
+          <div
+            className="box paddingX1 paddingY1"
+          >
+            <svg
+              aria-hidden={null}
+              aria-label="click to expand"
+              className="icon darkGray iconBlock"
+              height="12"
+              role="img"
+              viewBox="0 0 24 24"
+              width="12"
+            >
+              <path
+                d="test-file-stub"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr
+    className="divider"
+  />
+  <div
+    className="box"
+  >
+    <div
+      aria-controls="uniqueTestID-2"
+      aria-disabled={false}
+      aria-expanded={false}
+      aria-label="click to expand"
+      className="hideOutline tapTransition rounding0 accessibilityOutline fullWidth pointer"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onContextMenu={[Function]}
+      onFocus={[Function]}
+      onKeyPress={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="box paddingX6 paddingY6 xsDisplayFlex"
+      >
+        <div
+          className="box flexGrow itemsBaseline marginEnd6 xsDisplayFlex"
+        >
+          <div
+            className="box xsCol6 xsDisplayFlex"
+          >
+            <div
+              className="box marginEnd2"
+            >
+              <svg
+                aria-hidden={true}
+                aria-label=""
+                className="icon red iconBlock"
+                height={16}
+                role="img"
+                viewBox="0 0 24 24"
+                width={16}
+              >
+                <path
+                  d="test-file-stub"
+                />
+              </svg>
+            </div>
+            <div
+              className="Text fontSize3 red alignLeft breakWord fontWeightBold truncate"
+              title="Title3"
+            >
+              Title3
+            </div>
+          </div>
+          <div
+            className="box marginStart6 xsCol6"
+          >
+            <div
+              className="box marginBottom0"
+            >
+              <div
+                className="Text fontSize2 darkGray alignLeft breakWord fontWeightNormal truncate"
+                title="summary3"
+              >
+                summary3
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="box"
+          id="uniqueTestID-2"
+        >
+          <div
+            className="box paddingX1 paddingY1"
+          >
+            <svg
+              aria-hidden={null}
+              aria-label="click to expand"
+              className="icon darkGray iconBlock"
+              height="12"
+              role="img"
+              viewBox="0 0 24 24"
+              width="12"
+            >
+              <path
+                d="test-file-stub"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders correctly with one item 1`] = `
 <div
   className="box rounding2 shadow"