diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
index 878bd9f3eba..3869db9680d 100644
--- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md
@@ -11,217 +11,37 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ### Basic
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionBasic.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleText="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolled.tsx"
 ```
 
 ### Uncontrolled with dynamic toggle text
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-<ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
-  This content is visible only when the component is expanded.
-</ExpandableSection>;
+```ts file="ExpandableSectionUncontrolledDynamicToggleText.tsx"
 ```
 
 ### Detached
 
-```js
-import React from 'react';
-import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
-
-class DetachedExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    const contentId = 'detached-toggle-content';
-    return (
-      <Stack hasGutter>
-        <StackItem>
-          <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
-            This content is visible only when the component is expanded.
-          </ExpandableSection>
-        </StackItem>
-        <StackItem>
-          <ExpandableSectionToggle
-            isExpanded={isExpanded}
-            onToggle={this.onToggle}
-            contentId={contentId}
-            direction="up"
-          >
-            {isExpanded ? 'Show less' : 'Show more'}
-          </ExpandableSectionToggle>
-        </StackItem>
-      </Stack>
-    );
-  }
-}
+```ts file="ExpandableSectionDetached.tsx"
 ```
 
 ### Disclosure variation
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class DisclosureExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        displaySize="large"
-        isWidthLimited
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionDisclosure.tsx"
 ```
 
 ### Indented
 
-```js
-import React from 'react';
-import { ExpandableSection } from '@patternfly/react-core';
-
-class SimpleExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = isExpanded => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleText={isExpanded ? 'Show less' : 'Show more'}
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-        isIndented={true}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionIndented.tsx"
 ```
 
 ### With custom toggle content
 
 By using the `toggleContent` prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
 
-```js
-import React from "react";
-import { ExpandableSection, Badge } from "@patternfly/react-core";
-import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
-
-class CustomExpandableSection extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: false
-    };
-    this.onToggle = (isExpanded) => {
-      this.setState({
-        isExpanded
-      });
-    };
-  }
-
-  render() {
-    const { isExpanded } = this.state;
-    return (
-      <ExpandableSection
-        toggleContent={
-          <div>
-            <span>You can also use icons </span>
-            <CheckCircleIcon />
-            <span> or badges </span>
-            <Badge isRead={true}>4</Badge>
-            <span> !</span>
-          </div>
-        }
-        onToggle={this.onToggle}
-        isExpanded={isExpanded}
-      >
-        This content is visible only when the component is expanded.
-      </ExpandableSection>
-    );
-  }
-}
+```ts file="ExpandableSectionCustomToggle.tsx"
 ```
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx
new file mode 100644
index 00000000000..92df496258b
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionBasic: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection toggleText={isExpanded ? 'Show less' : 'Show more'} onToggle={onToggle} isExpanded={isExpanded}>
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx
new file mode 100644
index 00000000000..7601ae3944c
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ExpandableSection, Badge } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleContent={
+        <div>
+          <span>You can also use icons </span>
+          <CheckCircleIcon />
+          <span> or badges </span>
+          <Badge isRead={true}>4</Badge>
+          <span> !</span>
+        </div>
+      }
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
new file mode 100644
index 00000000000..178d62ce82d
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+
+export const ExpandableSectionDetached: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  const contentId = 'detached-toggle-content';
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <ExpandableSection isExpanded={isExpanded} isDetached contentId={contentId}>
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+      <StackItem>
+        <ExpandableSectionToggle isExpanded={isExpanded} onToggle={onToggle} contentId={contentId} direction="up">
+          {isExpanded ? 'Show less' : 'Show more'}
+        </ExpandableSectionToggle>
+      </StackItem>
+    </Stack>
+  );
+};
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx
new file mode 100644
index 00000000000..3e040c133d5
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      displaySize="large"
+      isWidthLimited
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx
new file mode 100644
index 00000000000..49b73de7f1a
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionIndented.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionIndented: React.FunctionComponent = () => {
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const onToggle = (isExpanded: boolean) => {
+    setIsExpanded(isExpanded);
+  };
+
+  return (
+    <ExpandableSection
+      toggleText={isExpanded ? 'Show less' : 'Show more'}
+      onToggle={onToggle}
+      isExpanded={isExpanded}
+      isIndented
+    >
+      This content is visible only when the component is expanded.
+    </ExpandableSection>
+  );
+};
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx
new file mode 100644
index 00000000000..627940fc6d6
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolled.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolled: React.FunctionComponent = () => (
+  <ExpandableSection toggleText="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);
diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx
new file mode 100644
index 00000000000..0883285a878
--- /dev/null
+++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleText.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggle: React.FunctionComponent = () => (
+  <ExpandableSection toggleTextExpanded="Show less" toggleTextCollapsed="Show more">
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);