add example

Signed-off-by: gitdallas <[email protected]>

Author: gitdallas

packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -28,6 +28,14 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ```
 
+### Uncontrolled with dynamic toggle content (function)
+
+Use `toggleContent` as a function to dynamically render different content based on the expanded state without managing state yourself.
+
+```ts file="ExpandableSectionUncontrolledDynamicToggleFunction.tsx"
+
+```
+
 ### Detached
 
 When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.

packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleFunction.tsx

@@ -0,0 +1,13 @@
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggleFunction: React.FunctionComponent = () => (
+  <ExpandableSection
+    toggleContent={(isExpanded) =>
+      isExpanded
+        ? 'Show less uncontrolled dynamic toggle example content'
+        : 'Show more uncontrolled dynamic toggle example content'
+    }
+  >
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);