diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49639733a8d..f7f6421f8ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Added `forceState` prop to control `EuiAccordion` state from outside ([#3240](https://github.com/elastic/eui/pull/3240))
- Fixed the inline styles being overwritten by consumer-passed inline styles in EuiBadge ([#3284](https://github.com/elastic/eui/pull/3284))
- Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions ([#3115](https://github.com/elastic/eui/pull/3115))
- Added support for `EuiCodeEditor` to set `readonly` and `id` on `` ([#3212](https://github.com/elastic/eui/pull/3212))
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 573602805ca..70ff10ccce1 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -100,6 +100,16 @@ import AccordionGrow from './accordion_grow';
const accordionGrowSource = require('!!raw-loader!./accordion_grow');
const accordionGrowHtml = renderToHtml(AccordionGrow);
+import AccordionForceState from './accordion_forceState';
+const accordionForceStateSource = require('!!raw-loader!./accordion_forceState');
+const accordionForceStateHtml = renderToHtml(AccordionForceState);
+const accordionForceStateSnippet = `
+
+`;
+
export const AccordionExample = {
title: 'Accordion',
intro: (
@@ -279,6 +289,7 @@ export const AccordionExample = {
snippet: accordionCallbackSnippet,
demo: ,
},
+
{
title: 'Accordion content can dynamically change height',
source: [
@@ -320,5 +331,26 @@ export const AccordionExample = {
),
demo: ,
},
+ {
+ title: 'Force accordion state',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: accordionForceStateSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: accordionForceStateHtml,
+ },
+ ],
+ text: (
+
+ Use the forceState prop to control open and close
+ state.
+
+ ),
+ snippet: accordionForceStateSnippet,
+ demo: ,
+ },
],
};
diff --git a/src-docs/src/views/accordion/accordion_forceState.js b/src-docs/src/views/accordion/accordion_forceState.js
new file mode 100644
index 00000000000..7d3ee0335d1
--- /dev/null
+++ b/src-docs/src/views/accordion/accordion_forceState.js
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+import {
+ EuiAccordion,
+ EuiText,
+ EuiButtonGroup,
+ EuiSpacer,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+const idPrefix = htmlIdGenerator()();
+
+export default () => {
+ const [trigger, setTrigger] = useState('closed');
+ const [toggleIdSelected, setID] = useState(`${idPrefix}--closed`);
+ const toggleButtons = [
+ {
+ id: `${idPrefix}--open`,
+ label: 'Open',
+ },
+ {
+ id: `${idPrefix}--closed`,
+ label: 'Close',
+ },
+ ];
+
+ const onChange = id => {
+ setTrigger(id === toggleButtons[0].id ? 'open' : 'closed');
+ setID(id);
+ };
+
+ return (
+
+
+
+
+
+
+ Any content inside of EuiAccordion will appear
+ here.
+
+
+
+
+ );
+};
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 55e34114b4d..edc08525519 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`EuiAccordion behavior closes when clicked twice 1`] = `
@@ -14,7 +14,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
className="euiAccordion__triggerWrapper"
>