diff --git a/src-docs/src/services/playground/dummyFunction.js b/src-docs/src/services/playground/dummyFunction.js
new file mode 100644
index 00000000000..af9c023e5d3
--- /dev/null
+++ b/src-docs/src/services/playground/dummyFunction.js
@@ -0,0 +1,9 @@
+import * as t from '@babel/types';
+
+export const dummyFunction = {
+  generate: val => {
+    if (!val) return null;
+    const obj = t.arrowFunctionExpression([], t.blockStatement([]), false);
+    return obj;
+  },
+};
diff --git a/src-docs/src/services/playground/index.js b/src-docs/src/services/playground/index.js
index 9eb55733dde..aec882db37c 100644
--- a/src-docs/src/services/playground/index.js
+++ b/src-docs/src/services/playground/index.js
@@ -4,3 +4,4 @@ export { default as propUtilityForPlayground } from './props';
 export { mapOptions } from './mapOptions';
 export { iconValidator } from './iconValidator';
 export { createOptionalEnum } from './createOptionalEnum';
+export { dummyFunction } from './dummyFunction';
diff --git a/src-docs/src/views/accordion/accordion_example.js b/src-docs/src/views/accordion/accordion_example.js
index 2a3ea4b4a9e..22d86caad1d 100644
--- a/src-docs/src/views/accordion/accordion_example.js
+++ b/src-docs/src/views/accordion/accordion_example.js
@@ -12,6 +12,8 @@ import {
   EuiSpacer,
 } from '../../../../src/components';
 
+import { accordionConfig } from './playground';
+
 import Accordion from './accordion';
 const accordionSource = require('!!raw-loader!./accordion');
 const accordionHtml = renderToHtml(Accordion);
@@ -354,4 +356,5 @@ export const AccordionExample = {
       demo: <AccordionForceState />,
     },
   ],
+  playground: accordionConfig,
 };
diff --git a/src-docs/src/views/accordion/playground.js b/src-docs/src/views/accordion/playground.js
new file mode 100644
index 00000000000..11367301cc8
--- /dev/null
+++ b/src-docs/src/views/accordion/playground.js
@@ -0,0 +1,61 @@
+import { PropTypes } from 'react-view';
+import { EuiAccordion, EuiText } from '../../../../src/components/';
+import {
+  propUtilityForPlayground,
+  createOptionalEnum,
+  dummyFunction,
+} from '../../services/playground';
+
+export const accordionConfig = () => {
+  const docgenInfo = Array.isArray(EuiAccordion.__docgenInfo)
+    ? EuiAccordion.__docgenInfo[0]
+    : EuiAccordion.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.buttonContent = {
+    ...propsToUse.buttonContent,
+    value: 'Click me to toggle',
+    type: PropTypes.String,
+  };
+
+  propsToUse.children = {
+    value: `<EuiText>
+    <p>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </p>
+  </EuiText>`,
+    type: PropTypes.ReactNode,
+    hidden: false,
+  };
+
+  propsToUse.onToggle = {
+    ...propsToUse.onToggle,
+    type: PropTypes.Custom,
+    value: undefined,
+    custom: {
+      use: 'switch',
+      label: 'Simulate',
+    },
+  };
+
+  propsToUse.forceState = createOptionalEnum(propsToUse.forceState);
+
+  return {
+    config: {
+      componentName: 'EuiAccordion',
+      props: propsToUse,
+      scope: {
+        EuiAccordion,
+        EuiText,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiAccordion', 'EuiText'],
+        },
+      },
+      customProps: {
+        onToggle: dummyFunction,
+      },
+    },
+  };
+};
diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js
index 91bbd4d1479..a4c60df5a37 100644
--- a/src-docs/src/views/badge/playground.js
+++ b/src-docs/src/views/badge/playground.js
@@ -7,8 +7,8 @@ import {
 import {
   propUtilityForPlayground,
   iconValidator,
+  dummyFunction,
 } from '../../services/playground';
-import * as t from '@babel/types';
 
 export const badgeConfig = () => {
   const docgenInfo = Array.isArray(EuiBadge.__docgenInfo)
@@ -88,17 +88,7 @@ export const badgeConfig = () => {
         },
       },
       customProps: {
-        onClick: {
-          generate: val => {
-            if (!val) return null;
-            const obj = t.arrowFunctionExpression(
-              [],
-              t.blockStatement([]),
-              false
-            );
-            return obj;
-          },
-        },
+        onClick: dummyFunction,
       },
     },
   };
diff --git a/src-docs/src/views/card/playground.js b/src-docs/src/views/card/playground.js
index c6d68570141..981df8aee04 100644
--- a/src-docs/src/views/card/playground.js
+++ b/src-docs/src/views/card/playground.js
@@ -1,7 +1,9 @@
 import { PropTypes } from 'react-view';
 import { EuiCard } from '../../../../src/components/';
-import { propUtilityForPlayground } from '../../services/playground';
-import * as t from '@babel/types';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+} from '../../services/playground';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiCard.__docgenInfo)
@@ -50,17 +52,7 @@ export default () => {
         },
       },
       customProps: {
-        onClick: {
-          generate: val => {
-            if (!val) return null;
-            const obj = t.arrowFunctionExpression(
-              [],
-              t.blockStatement([]),
-              false
-            );
-            return obj;
-          },
-        },
+        onClick: dummyFunction,
       },
     },
   };
diff --git a/src-docs/src/views/toast/playground.js b/src-docs/src/views/toast/playground.js
index 4478ddf57f1..4aab1209fb2 100644
--- a/src-docs/src/views/toast/playground.js
+++ b/src-docs/src/views/toast/playground.js
@@ -4,8 +4,8 @@ import {
   propUtilityForPlayground,
   iconValidator,
   createOptionalEnum,
+  dummyFunction,
 } from '../../services/playground';
-import * as t from '@babel/types';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiToast.__docgenInfo)
@@ -47,17 +47,7 @@ export default () => {
         },
       },
       customProps: {
-        onClose: {
-          generate: val => {
-            if (!val) return null;
-            const obj = t.arrowFunctionExpression(
-              [],
-              t.blockStatement([]),
-              false
-            );
-            return obj;
-          },
-        },
+        onClose: dummyFunction,
       },
     },
   };
diff --git a/src-docs/src/views/tool_tip/playground.js b/src-docs/src/views/tool_tip/playground.js
index 2bf1dc98c50..71168bb4c06 100644
--- a/src-docs/src/views/tool_tip/playground.js
+++ b/src-docs/src/views/tool_tip/playground.js
@@ -1,7 +1,9 @@
 import { PropTypes } from 'react-view';
 import { EuiToolTip } from '../../../../src/components/';
-import { propUtilityForPlayground } from '../../services/playground';
-import * as t from '@babel/types';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+} from '../../services/playground';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiToolTip.__docgenInfo)
@@ -52,17 +54,7 @@ export default () => {
         },
       },
       customProps: {
-        onMouseOut: {
-          generate: val => {
-            if (!val) return null;
-            const obj = t.arrowFunctionExpression(
-              [],
-              t.blockStatement([]),
-              false
-            );
-            return obj;
-          },
-        },
+        onMouseOut: dummyFunction,
       },
     },
   };