Allow state to be controlled from outside

src-docs/src/views/accordion/accordion_example.js

@@ -100,6 +100,10 @@ import AccordionGrow from './accordion_grow';
 const accordionGrowSource = require('!!raw-loader!./accordion_grow');
 const accordionGrowHtml = renderToHtml(AccordionGrow);
 
+import AccordionForceClose from './accordion_forceClose';
+const accordionForceCloseSource = require('!!raw-loader!./accordion_forceClose');
+const accordionForceCloseHtml = renderToHtml(AccordionForceClose);
+
 export const AccordionExample = {
   title: 'Accordion',
   intro: (
@@ -279,6 +283,7 @@ export const AccordionExample = {
       snippet: accordionCallbackSnippet,
       demo: <AccordionCallback />,
     },
+
     {
       title: 'Accordion content can dynamically change height',
       source: [
@@ -320,5 +325,27 @@ export const AccordionExample = {
       ),
       demo: <AccordionForm />,
     },
+    {
+      title:
+        'Accordion state ,i.e, open and close can be controlled from outside',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accordionForceCloseSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: accordionForceCloseHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use the <EuiCode>forceClose</EuiCode> prop to controll open and close
+          state.
+        </p>
+      ),
+      snippet: accordionCallbackSnippet,
+      demo: <AccordionForceClose />,
+    },
   ],
 };

src-docs/src/views/accordion/accordion_forceClose.js

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+
+import {
+  EuiAccordion,
+  EuiText,
+  EuiSwitch,
+  EuiSpacer,
+} from '../../../../src/components';
+
+export default () => {
+  const [forceClose, setForceClose] = useState(true);
+  const onChange = e => {
+    setForceClose(e.target.checked);
+  };
+
+  return (
+    <div>
+      <EuiSwitch label="forceClose" checked={forceClose} onChange={onChange} />
+      <EuiSpacer />
+      <EuiAccordion
+        id="accordion1"
+        forceClose={forceClose}
+        buttonContent="Click me to toggle open / close">
+        <EuiText>
+          <p>
+            Any content inside of <strong>EuiAccordion</strong> will appear
+            here.
+          </p>
+        </EuiText>
+      </EuiAccordion>
+    </div>
+  );
+};

src/components/accordion/accordion.tsx

@@ -54,6 +54,7 @@ export type EuiAccordionProps = HTMLAttributes<HTMLDivElement> &
      * Placing on the `right` doesn't work with `extraAction` and so it will be ignored
      */
     arrowDisplay?: 'left' | 'right' | 'none';
+    forceClose?: boolean;
   };
 
 export class EuiAccordion extends Component<
@@ -119,13 +120,14 @@ export class EuiAccordion extends Component<
       paddingSize,
       initialIsOpen,
       arrowDisplay,
+      forceClose,
       ...rest
     } = this.props;
 
     const classes = classNames(
       'euiAccordion',
       {
-        'euiAccordion-isOpen': this.state.isOpen,
+        'euiAccordion-isOpen': this.state.isOpen && !forceClose,
       },
       className
     );
@@ -143,7 +145,7 @@ export class EuiAccordion extends Component<
     );
 
     const iconClasses = classNames('euiAccordion__icon', {
-      'euiAccordion__icon-isOpen': this.state.isOpen,
+      'euiAccordion__icon-isOpen': this.state.isOpen && !forceClose,
     });
 
     let icon;
@@ -168,7 +170,7 @@ export class EuiAccordion extends Component<
         <div className="euiAccordion__triggerWrapper">
           <button
             aria-controls={id}
-            aria-expanded={!!this.state.isOpen}
+            aria-expanded={!!this.state.isOpen && !forceClose}
             onClick={this.onToggle}
             className={buttonClasses}
             type="button">