From e7ebfc06223be49c2fdb56da4f9268b13c9bc9f5 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <70952936+thatblindgeye@users.noreply.github.com>
Date: Thu, 4 Jan 2024 09:17:10 -0500
Subject: [PATCH] feat(Accordion): pulled in Penta updates (#9876)

* feat(Accordion): pulled in Penta updates

* Updated unit tests

* Updated demo app

* Updated card with accordion demo
---
 .../components/Accordion/AccordionContent.tsx | 19 ++--
 .../components/Accordion/AccordionContext.ts  |  5 +
 .../components/Accordion/AccordionItem.tsx    | 23 ++++-
 .../components/Accordion/AccordionToggle.tsx  | 56 +++++------
 .../__tests__/AccordionContent.test.tsx       | 92 ++++++++++++-------
 .../__tests__/AccordionItem.test.tsx          | 20 +++-
 .../__tests__/AccordionToggle.test.tsx        | 22 +++--
 .../Generated/AccordionContent.test.tsx       | 23 -----
 .../Generated/AccordionItem.test.tsx          | 13 ---
 .../Generated/AccordionToggle.test.tsx        | 21 -----
 .../AccordionContent.test.tsx.snap            |  7 --
 .../__snapshots__/AccordionItem.test.tsx.snap |  7 --
 .../AccordionToggle.test.tsx.snap             |  7 --
 .../AccordionContent.test.tsx.snap            |  2 +-
 .../__snapshots__/AccordionItem.test.tsx.snap |  6 +-
 .../Accordion/examples/AccordionBordered.tsx  | 25 ++---
 .../examples/AccordionDefinitionList.tsx      | 25 ++---
 ...cordionFixedWithMultipleExpandBehavior.tsx | 55 +++--------
 .../AccordionSingleExpandBehavior.tsx         | 25 ++---
 .../demos/examples/Card/CardWithAccordion.tsx | 15 ++-
 .../demos/Accordion/AccordionDemo.tsx         | 46 +++-------
 21 files changed, 220 insertions(+), 294 deletions(-)
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap
 delete mode 100644 packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap

diff --git a/packages/react-core/src/components/Accordion/AccordionContent.tsx b/packages/react-core/src/components/Accordion/AccordionContent.tsx
index 0dc117b86b4..695313627df 100644
--- a/packages/react-core/src/components/Accordion/AccordionContent.tsx
+++ b/packages/react-core/src/components/Accordion/AccordionContent.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -11,8 +11,6 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Identify the AccordionContent item  */
   id?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isHidden?: boolean;
   /** Flag to indicate Accordion content is fixed  */
   isFixed?: boolean;
   /** Adds accessible text to the Accordion content */
@@ -29,7 +27,6 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   className = '',
   children = null,
   id = '',
-  isHidden = false,
   isFixed = false,
   isCustomContent = false,
   'aria-label': ariaLabel = '',
@@ -39,16 +36,17 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
 }: AccordionContentProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
   const containerRef = React.useRef(null);
+  const { isExpanded } = React.useContext(AccordionItemContext);
 
   React.useEffect(() => {
-    if (containerRef?.current && isFixed && !isHidden) {
+    if (containerRef?.current && isFixed && isExpanded) {
       const { offsetHeight, scrollHeight } = containerRef.current;
 
       setHasScrollbar(offsetHeight < scrollHeight);
     } else if (!isFixed) {
       setHasScrollbar(false);
     }
-  }, [containerRef, isFixed, isHidden]);
+  }, [containerRef, isFixed, isExpanded]);
 
   return (
     <AccordionContext.Consumer>
@@ -58,13 +56,8 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
           <Container
             ref={containerRef}
             id={id}
-            className={css(
-              styles.accordionExpandableContent,
-              isFixed && styles.modifiers.fixed,
-              !isHidden && styles.modifiers.expanded,
-              className
-            )}
-            hidden={isHidden}
+            className={css(styles.accordionExpandableContent, isFixed && styles.modifiers.fixed, className)}
+            hidden={!isExpanded}
             {...(ariaLabel && { 'aria-label': ariaLabel })}
             {...(ariaLabelledby && { 'aria-labelledby': ariaLabelledby })}
             {...(hasScrollbar && { tabIndex: 0 })}
diff --git a/packages/react-core/src/components/Accordion/AccordionContext.ts b/packages/react-core/src/components/Accordion/AccordionContext.ts
index 8df38f401fa..73b9de4661c 100644
--- a/packages/react-core/src/components/Accordion/AccordionContext.ts
+++ b/packages/react-core/src/components/Accordion/AccordionContext.ts
@@ -5,4 +5,9 @@ interface AccordionContextProps {
   ToggleContainer: React.ElementType;
 }
 
+interface AccordionItemContextProps {
+  isExpanded?: boolean;
+}
+
 export const AccordionContext = React.createContext<Partial<AccordionContextProps>>({});
+export const AccordionItemContext = React.createContext({} as AccordionItemContextProps);
diff --git a/packages/react-core/src/components/Accordion/AccordionItem.tsx b/packages/react-core/src/components/Accordion/AccordionItem.tsx
index f4c413d479a..3d414b6cbdc 100644
--- a/packages/react-core/src/components/Accordion/AccordionItem.tsx
+++ b/packages/react-core/src/components/Accordion/AccordionItem.tsx
@@ -1,11 +1,28 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
+import { AccordionItemContext } from './AccordionContext';
 
 export interface AccordionItemProps {
-  /** Content rendered inside the Accordion item  */
+  /** Content rendered inside the accordion item. */
   children?: React.ReactNode;
+  /** Additional classes added to the accordion item. */
+  className?: string;
+  /** Flag to indicate whether the accordion item is expanded. */
+  isExpanded?: boolean;
 }
 
-export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({ children = null }: AccordionItemProps) => (
-  <React.Fragment>{children}</React.Fragment>
+export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({
+  children = null,
+  className,
+  isExpanded: isExpandedProp = false
+}: AccordionItemProps) => (
+  <AccordionItemContext.Provider
+    value={{
+      isExpanded: isExpandedProp
+    }}
+  >
+    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)}>{children}</div>
+  </AccordionItemContext.Provider>
 );
 AccordionItem.displayName = 'AccordionItem';
diff --git a/packages/react-core/src/components/Accordion/AccordionToggle.tsx b/packages/react-core/src/components/Accordion/AccordionToggle.tsx
index a2ec5b28124..256fbb06f67 100644
--- a/packages/react-core/src/components/Accordion/AccordionToggle.tsx
+++ b/packages/react-core/src/components/Accordion/AccordionToggle.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import { AccordionContext } from './AccordionContext';
+import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
 export interface AccordionToggleProps
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
@@ -10,8 +10,6 @@ export interface AccordionToggleProps
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */
   className?: string;
-  /** Flag to show if the expanded content of the Accordion item is visible  */
-  isExpanded?: boolean;
   /** Identify the Accordion toggle number  */
   id: string;
   /** Container to override the default for toggle */
@@ -21,31 +19,35 @@ export interface AccordionToggleProps
 export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   className = '',
   id,
-  isExpanded = false,
   children = null,
   component,
   ...props
-}: AccordionToggleProps) => (
-  <AccordionContext.Consumer>
-    {({ ToggleContainer }) => {
-      const Container = component || ToggleContainer;
-      return (
-        <Container>
-          <button
-            id={id}
-            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-            aria-expanded={isExpanded}
-            type="button"
-            {...props}
-          >
-            <span className={css(styles.accordionToggleText)}>{children}</span>
-            <span className={css(styles.accordionToggleIcon)}>
-              <AngleRightIcon />
-            </span>
-          </button>
-        </Container>
-      );
-    }}
-  </AccordionContext.Consumer>
-);
+}: AccordionToggleProps) => {
+  const { isExpanded } = React.useContext(AccordionItemContext);
+
+  return (
+    <AccordionContext.Consumer>
+      {({ ToggleContainer }) => {
+        const Container = component || ToggleContainer;
+
+        return (
+          <Container>
+            <button
+              id={id}
+              className={css(styles.accordionToggle, className)}
+              aria-expanded={isExpanded}
+              type="button"
+              {...props}
+            >
+              <span className={css(styles.accordionToggleText)}>{children}</span>
+              <span className={css(styles.accordionToggleIcon)}>
+                <AngleRightIcon />
+              </span>
+            </button>
+          </Container>
+        );
+      }}
+    </AccordionContext.Consumer>
+  );
+};
 AccordionToggle.displayName = 'AccordionToggle';
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
index 0c28e90762b..2008005acf8 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionContent.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { AccordionContent } from '../AccordionContent';
-import { AccordionContext } from '../AccordionContext';
+import { AccordionContext, AccordionItemContext } from '../AccordionContext';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('../AccordionExpandableContentBody', () => ({
@@ -13,7 +13,9 @@ jest.mock('../AccordionExpandableContentBody', () => ({
 test('Renders without children', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent data-testid="accordion-content" />
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent data-testid="accordion-content" />
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -23,7 +25,9 @@ test('Renders without children', () => {
 test('Renders children', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -33,7 +37,9 @@ test('Renders children', () => {
 test('Renders with children wrapped in AccordionExpandableContentBody by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -43,7 +49,9 @@ test('Renders with children wrapped in AccordionExpandableContentBody by default
 test('Does not render children wrapped in AccordionExpandableContentBody when isCustomContent=true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent isCustomContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent isCustomContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -53,7 +61,9 @@ test('Does not render children wrapped in AccordionExpandableContentBody when is
 test('Renders with the passed aria label', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent aria-label="Accordion content">Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent aria-label="Accordion content">Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -65,7 +75,9 @@ test('Renders with the passed aria-labelledby', () => {
     <>
       <div id="accordion-label1">Accordion content</div>
       <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-        <AccordionContent aria-labelledby="accordion-label1">Test</AccordionContent>
+        <AccordionItemContext.Provider value={{ isExpanded: true }}>
+          <AccordionContent aria-labelledby="accordion-label1">Test</AccordionContent>
+        </AccordionItemContext.Provider>
       </AccordionContext.Provider>
     </>
   );
@@ -77,7 +89,9 @@ test('Renders with inherited element props spread to the component', () => {
   render(
     <>
       <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-        <AccordionContent aria-labelledby="labelling-id">Test</AccordionContent>
+        <AccordionItemContext.Provider value={{ isExpanded: true }}>
+          <AccordionContent aria-labelledby="labelling-id">Test</AccordionContent>
+        </AccordionItemContext.Provider>
         <p id="labelling-id">Label</p>
       </AccordionContext.Provider>
     </>
@@ -89,7 +103,9 @@ test('Renders with inherited element props spread to the component', () => {
 test(`Renders with class name ${styles.accordionExpandableContent}`, () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -99,7 +115,9 @@ test(`Renders with class name ${styles.accordionExpandableContent}`, () => {
 test('Renders with custom class names provided via prop', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent className="test-class">Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent className="test-class">Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -109,7 +127,9 @@ test('Renders with custom class names provided via prop', () => {
 test('Renders with the id prop passed to the container', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent id="test-id">Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent id="test-id">Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -119,7 +139,9 @@ test('Renders with the id prop passed to the container', () => {
 test('Renders the container as the element provided in ContentContainer from a context by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -130,7 +152,9 @@ test('Renders the container as the element provided in ContentContainer from a c
 test('Renders as the element provided via the component prop when one is provided', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'button' }}>
-      <AccordionContent component="h1">Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent component="h1">Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
@@ -138,56 +162,60 @@ test('Renders as the element provided via the component prop when one is provide
   expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
 });
 
-test('Renders without pf-m-fixed by default', () => {
+test('Renders the container as hidden when isExpanded from context is false', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: false }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).not.toHaveClass('pf-m-fixed');
+  expect(screen.getByRole('heading', { hidden: true })).toHaveAttribute('hidden');
 });
 
-test('Renders with pf-m-fixed when isFixed is true', () => {
+test('Renders the container as not hidden when isExpanded from context is true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent isFixed>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
-  expect(screen.getByRole('heading')).toHaveClass('pf-m-fixed');
+  expect(screen.getByRole('heading', { level: 3 })).not.toHaveAttribute('hidden');
 });
 
-test('Renders unhidden and with pf-m-expanded by default', () => {
+test('Renders without pf-m-fixed by default', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading');
-
-  expect(contentContainer).not.toHaveAttribute('hidden');
-  expect(contentContainer).toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('heading')).not.toHaveClass('pf-m-fixed');
 });
 
-test('Renders aria-hidden and without pf-m-expanded when isHidden is true', () => {
+test('Renders with pf-m-fixed when isFixed is true', () => {
   render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent isHidden>Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent isFixed>Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
-  const contentContainer = screen.getByRole('heading', { hidden: true });
-
-  expect(contentContainer).toHaveAttribute('hidden');
-  expect(contentContainer).not.toHaveClass('pf-m-expanded');
+  expect(screen.getByRole('heading')).toHaveClass('pf-m-fixed');
 });
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ContentContainer: 'h3' }}>
-      <AccordionContent aria-label="this is a simple accordion">Test</AccordionContent>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionContent aria-label="this is a simple accordion">Test</AccordionContent>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
   expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx
index ca18a80cf88..c777576723c 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionItem.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react';
-
 import { AccordionItem } from '../AccordionItem';
+import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 test('Renders children', () => {
   render(<AccordionItem>Test</AccordionItem>);
@@ -10,6 +10,24 @@ test('Renders children', () => {
   expect(screen.getByText('Test')).toBeVisible();
 });
 
+test(`Renders with class ${styles.accordionItem} by default`, () => {
+  render(<AccordionItem>Test</AccordionItem>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.accordionItem, { exact: true });
+});
+
+test(`Renders with class ${styles.modifiers.expanded} when isExpanded is true`, () => {
+  render(<AccordionItem isExpanded>Test</AccordionItem>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.expanded);
+});
+
+test(`Renders with additional classes when className is passed`, () => {
+  render(<AccordionItem className="custom-class">Test</AccordionItem>);
+
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx b/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
index dd39f0359ea..54f44473073 100644
--- a/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
+++ b/packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { AccordionToggle } from '../AccordionToggle';
-import { AccordionContext } from '../AccordionContext';
+import { AccordionContext, AccordionItemContext } from '../AccordionContext';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
@@ -127,38 +127,40 @@ test('Renders the container as the element provided via the component prop when
   expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
 });
 
-test('Renders the toggle without pf-m-expanded and aria-expanded=false by default', () => {
+test('Renders the toggle with aria-expanded=false when isExpanded from context is false', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
-      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      <AccordionItemContext.Provider value={{ isExpanded: false }}>
+        <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
   const toggle = screen.getByRole('button');
 
-  expect(toggle).not.toHaveClass('pf-m-expanded');
   expect(toggle).toHaveAttribute('aria-expanded', 'false');
 });
 
-test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpanded=true', () => {
+test('Renders the toggle with aria-expanded=true when isExpanded from context is true', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
-      <AccordionToggle id="accordion-toggle" isExpanded>
-        Test
-      </AccordionToggle>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
 
   const toggle = screen.getByRole('button');
 
-  expect(toggle).toHaveClass('pf-m-expanded');
   expect(toggle).toHaveAttribute('aria-expanded', 'true');
 });
 
 test('Matches the snapshot', () => {
   const { asFragment } = render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
-      <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      <AccordionItemContext.Provider value={{ isExpanded: false }}>
+        <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      </AccordionItemContext.Provider>
     </AccordionContext.Provider>
   );
   expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx
deleted file mode 100644
index e89d520984c..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionContent.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionContent } from '../../AccordionContent';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionContent should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionContent
-      children={<>ReactNode</>}
-      className={"''"}
-      id={"''"}
-      isHidden={false}
-      isFixed={false}
-      aria-label={"''"}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx
deleted file mode 100644
index ba6e6f5b939..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionItem.test.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionItem } from '../../AccordionItem';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionItem should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(<AccordionItem children={<>ReactNode</>} />);
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx b/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx
deleted file mode 100644
index ee320cdd12b..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/AccordionToggle.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * This test was generated
- */
-import * as React from 'react';
-import { render } from '@testing-library/react';
-import { AccordionToggle } from '../../AccordionToggle';
-// any missing imports can usually be resolved by adding them here
-import {} from '../..';
-
-it('AccordionToggle should match snapshot (auto-generated)', () => {
-  const { asFragment } = render(
-    <AccordionToggle
-      children={<>ReactNode</>}
-      className={"''"}
-      isExpanded={false}
-      id={'string'}
-      component={() => <div />}
-    />
-  );
-  expect(asFragment()).toMatchSnapshot();
-});
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap
deleted file mode 100644
index 37bfce90533..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionContent.test.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionContent should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap
deleted file mode 100644
index 6731e404674..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionItem.test.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionItem should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  ReactNode
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap
deleted file mode 100644
index 53562f03e49..00000000000
--- a/packages/react-core/src/components/Accordion/__tests__/Generated/__snapshots__/AccordionToggle.test.tsx.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AccordionToggle should match snapshot (auto-generated) 1`] = `
-<DocumentFragment>
-  <div />
-</DocumentFragment>
-`;
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap
index 2c40e19c03d..929e19420f9 100644
--- a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionContent.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <h3
     aria-label="this is a simple accordion"
-    class="pf-v5-c-accordion__expandable-content pf-m-expanded"
+    class="pf-v5-c-accordion__expandable-content"
     id=""
   >
     <div
diff --git a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap
index 2c26d83dce7..00170a76472 100644
--- a/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap
+++ b/packages/react-core/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap
@@ -2,6 +2,10 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  Test
+  <div
+    class="pf-v5-c-accordion__item"
+  >
+    Test
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
index ee7e321f73f..448b124eccd 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx
@@ -26,17 +26,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
   return (
     <>
       <Accordion isBordered displaySize={displaySize}>
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle1');
             }}
-            isExpanded={expanded === 'bordered-toggle1'}
             id="bordered-toggle1"
           >
             Item one
           </AccordionToggle>
-          <AccordionContent id="bordered-expand1" isHidden={expanded !== 'bordered-toggle1'}>
+          <AccordionContent id="bordered-expand1">
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
@@ -44,17 +43,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle2');
             }}
-            isExpanded={expanded === 'bordered-toggle2'}
             id="bordered-toggle2"
           >
             Item two
           </AccordionToggle>
-          <AccordionContent id="bordered-expand2" isHidden={expanded !== 'bordered-toggle2'}>
+          <AccordionContent id="bordered-expand2">
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
               ultrices, faucibus erat id, maximus nunc.
@@ -62,32 +60,30 @@ export const AccordionBordered: React.FunctionComponent = () => {
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle3');
             }}
-            isExpanded={expanded === 'bordered-toggle3'}
             id="bordered-toggle3"
           >
             Item three
           </AccordionToggle>
-          <AccordionContent id="bordered-expand3" isHidden={expanded !== 'bordered-toggle3'}>
+          <AccordionContent id="bordered-expand3">
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
 
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle4');
             }}
-            isExpanded={expanded === 'bordered-toggle4'}
             id="bordered-toggle4"
           >
             Item four
           </AccordionToggle>
-          <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
+          <AccordionContent id="bordered-expand4" isCustomContent>
             <AccordionExpandableContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -104,17 +100,16 @@ export const AccordionBordered: React.FunctionComponent = () => {
             </AccordionExpandableContentBody>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem>
+        <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>
           <AccordionToggle
             onClick={() => {
               onToggle('bordered-toggle5');
             }}
-            isExpanded={expanded === 'bordered-toggle5'}
             id="bordered-toggle5"
           >
             Item five
           </AccordionToggle>
-          <AccordionContent id="bordered-expand5" isHidden={expanded !== 'bordered-toggle5'}>
+          <AccordionContent id="bordered-expand5">
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
         </AccordionItem>
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
index 85098f31b51..d91573f53ce 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx
@@ -14,17 +14,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'def-list-toggle1'}
           id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
+        <AccordionContent id="def-list-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'def-list-toggle2'}
           id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
+        <AccordionContent id="def-list-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'def-list-toggle3'}
           id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
+        <AccordionContent id="def-list-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'def-list-toggle4'}
           id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
+        <AccordionContent id="def-list-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'def-list-toggle5'}
           id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
+        <AccordionContent id="def-list-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
index ceb7a8d4486..e0375c1056d 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx
@@ -13,62 +13,41 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle1')}
-          isExpanded={expanded.includes('ex2-toggle1')}
-          id="ex2-toggle1"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle1')} id="ex2-toggle1">
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex2-expand1" isHidden={!expanded.includes('ex2-toggle1')} isFixed>
+        <AccordionContent id="ex2-expand1" isFixed>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle2')}
-          isExpanded={expanded.includes('ex2-toggle2')}
-          id="ex2-toggle2"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle2')} id="ex2-toggle2">
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex2-expand2" isHidden={!expanded.includes('ex2-toggle2')} isFixed>
+        <AccordionContent id="ex2-expand2" isFixed>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle3')}
-          isExpanded={expanded.includes('ex2-toggle3')}
-          id="ex2-toggle3"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle3')} id="ex2-toggle3">
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex2-expand3" isHidden={!expanded.includes('ex2-toggle3')} isFixed>
+        <AccordionContent id="ex2-expand3" isFixed>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle4')}
-          isExpanded={expanded.includes('ex2-toggle4')}
-          id="ex2-toggle4"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle4')} id="ex2-toggle4">
           Item four
         </AccordionToggle>
-        <AccordionContent
-          aria-labelledby="ex2-toggle4"
-          id="ex2-expand4"
-          isHidden={!expanded.includes('ex2-toggle4')}
-          isFixed
-        >
+        <AccordionContent aria-labelledby="ex2-toggle4" id="ex2-expand4" isFixed>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -89,15 +68,11 @@ export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =
           </p>
         </AccordionContent>
       </AccordionItem>
-      <AccordionItem>
-        <AccordionToggle
-          onClick={() => toggle('ex2-toggle5')}
-          isExpanded={expanded.includes('ex2-toggle5')}
-          id="ex2-toggle5"
-        >
+      <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>
+        <AccordionToggle onClick={() => toggle('ex2-toggle5')} id="ex2-toggle5">
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex2-expand5" isHidden={!expanded.includes('ex2-toggle5')} isFixed>
+        <AccordionContent id="ex2-expand5" isFixed>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>
diff --git a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
index 332282c6811..17359cc4c0d 100644
--- a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
+++ b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx
@@ -14,17 +14,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
 
   return (
     <Accordion asDefinitionList={false}>
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle1'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
           id="ex-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="ex-expand1">
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -32,17 +31,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle2'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
           id="ex-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="ex-expand2">
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -50,32 +48,30 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle3'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
           id="ex-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="ex-expand3">
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle4'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
           id="ex-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="ex-expand4">
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -88,17 +84,16 @@ export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
         </AccordionContent>
       </AccordionItem>
 
-      <AccordionItem>
+      <AccordionItem isExpanded={expanded === 'ex-toggle5'}>
         <AccordionToggle
           onClick={() => {
             onToggle('ex-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
           id="ex-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="ex-expand5">
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>
diff --git a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
index faaa1bec70e..14f24556174 100644
--- a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
+++ b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx
@@ -33,7 +33,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
       </CardHeader>
       <CardBody>
         <Accordion>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu1'}>
             <AccordionToggle
               id="cpu1-toggle"
               onClick={() => {
@@ -43,11 +43,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu1');
                 }
               }}
-              isExpanded={openCPU === 'cpu1'}
             >
               CPU 1
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu1'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -191,7 +190,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu2'}>
             <AccordionToggle
               id="cpu2-toggle"
               onClick={() => {
@@ -201,11 +200,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu2');
                 }
               }}
-              isExpanded={openCPU === 'cpu2'}
             >
               CPU 2
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu2'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
@@ -349,7 +347,7 @@ export const CardWithAccordion: React.FunctionComponent = () => {
               </Grid>
             </AccordionContent>
           </AccordionItem>
-          <AccordionItem>
+          <AccordionItem isExpanded={openCPU === 'cpu3'}>
             <AccordionToggle
               id="cpu3-toggle"
               onClick={() => {
@@ -359,11 +357,10 @@ export const CardWithAccordion: React.FunctionComponent = () => {
                   setOpenCPU('cpu3');
                 }
               }}
-              isExpanded={openCPU === 'cpu3'}
             >
               CPU 3
             </AccordionToggle>
-            <AccordionContent isHidden={openCPU !== 'cpu3'}>
+            <AccordionContent>
               <Grid hasGutter>
                 <Grid hasGutter>
                   <GridItem md={4}>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx
index f5811f44363..0c8673805fc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/Accordion/AccordionDemo.tsx
@@ -15,15 +15,11 @@ export const AccordionDemo = () => {
   return (
     <>
       <Accordion asDefinitionList={false}>
-        <AccordionItem>
-          <AccordionToggle
-            id={`divAccordion-item1-toggle`}
-            onClick={() => onToggle('divAccordion-item1-toggle')}
-            isExpanded={expanded === 'divAccordion-item1-toggle'}
-          >
+        <AccordionItem isExpanded={expanded === 'divAccordion-item1-toggle'}>
+          <AccordionToggle id={`divAccordion-item1-toggle`} onClick={() => onToggle('divAccordion-item1-toggle')}>
             Div item one
           </AccordionToggle>
-          <AccordionContent id={`divAccordion-item1-content`} isHidden={expanded !== 'divAccordion-item1-toggle'}>
+          <AccordionContent id={`divAccordion-item1-content`}>
             <p>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -44,38 +40,22 @@ export const AccordionDemo = () => {
             </p>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            id={`divAccordion-item2-toggle`}
-            onClick={() => onToggle('divAccordion-item2-toggle')}
-            isExpanded={expanded === 'divAccordion-item2-toggle'}
-          >
+        <AccordionItem isExpanded={expanded === 'divAccordion-item2-toggle'}>
+          <AccordionToggle id={`divAccordion-item2-toggle`} onClick={() => onToggle('divAccordion-item2-toggle')}>
             Div item two
           </AccordionToggle>
-          <AccordionContent
-            id={`divAccordion-item2-content`}
-            isFixed
-            isHidden={expanded !== 'divAccordion-item2-toggle'}
-          >
+          <AccordionContent id={`divAccordion-item2-content`} isFixed>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
             </p>
           </AccordionContent>
         </AccordionItem>
-        <AccordionItem>
-          <AccordionToggle
-            id={`divAccordion-item3-toggle`}
-            onClick={() => onToggle('divAccordion-item3-toggle')}
-            isExpanded={expanded === 'divAccordion-item3-toggle'}
-          >
+        <AccordionItem isExpanded={expanded === 'divAccordion-item3-toggle'}>
+          <AccordionToggle id={`divAccordion-item3-toggle`} onClick={() => onToggle('divAccordion-item3-toggle')}>
             Div item three
           </AccordionToggle>
-          <AccordionContent
-            id={`divAccordion-item3-content`}
-            isFixed
-            isHidden={expanded !== 'divAccordion-item3-toggle'}
-          >
+          <AccordionContent id={`divAccordion-item3-content`} isFixed>
             <p>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -99,11 +79,9 @@ export const AccordionDemo = () => {
       </Accordion>
       <br />
       <Accordion>
-        <AccordionItem>
-          <AccordionToggle id={`definitionListAccordion-item1-toggle`} isExpanded={true}>
-            Definition list item one
-          </AccordionToggle>
-          <AccordionContent id={`definitionListAccordion-item1-content`} isFixed isHidden={false}>
+        <AccordionItem isExpanded={true}>
+          <AccordionToggle id={`definitionListAccordion-item1-toggle`}>Definition list item one</AccordionToggle>
+          <AccordionContent id={`definitionListAccordion-item1-content`} isFixed>
             <p>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices