@patternfly/react-core 6.0.0-alpha.7 → 6.0.0-alpha.71

package/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();

package/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();

package/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,20 +127,35 @@ 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' }}>
+      <AccordionItemContext.Provider value={{ isExpanded: true }}>
+        <AccordionToggle id="accordion-toggle">Test</AccordionToggle>
+      </AccordionItemContext.Provider>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('Renders toggle text before toggle icon by default', () => {
   render(
     <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
       <AccordionToggle id="accordion-toggle" isExpanded>
@@ -151,14 +166,113 @@ test('Renders the toggle with pf-m-expanded and aria-expanded=true when isExpand
 
   const toggle = screen.getByRole('button');
 
-  expect(toggle).toHaveClass('pf-m-expanded');
-  expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
+});
+
+test('Renders toggle text before toggle icon by default', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleText);
+});
+
+test('Renders toggle icon before toggle text when togglePosition from context = "start"', () => {
+  render(
+    <AccordionContext.Provider value={{ ToggleContainer: 'h3', togglePosition: 'start' }}>
+      <AccordionToggle id="accordion-toggle" isExpanded>
+        Test
+      </AccordionToggle>
+    </AccordionContext.Provider>
+  );
+
+  const toggle = screen.getByRole('button');
+
+  expect(toggle.firstChild).toHaveClass(styles.accordionToggleIcon);
 });
 
 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();

package/src/components/Accordion/__tests__/__snapshots__/Accordion.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <dl
     aria-label="this is a simple accordion"
-    class="pf-v5-c-accordion"
+    class="pf-v6-c-accordion"
   />
 </DocumentFragment>
 `;

package/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-v6-c-accordion__expandable-content"
     id=""
   >
     <div

package/src/components/Accordion/__tests__/__snapshots__/AccordionExpandedContentBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-accordion__expandable-content-body"
+    class="pf-v6-c-accordion__expandable-content-body"
   >
     Test
   </div>
@@ -13,7 +13,7 @@ exports[`Matches the snapshot 1`] = `
 exports[`Renders without children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-accordion__expandable-content-body"
+    class="pf-v6-c-accordion__expandable-content-body"
   />
 </DocumentFragment>
 `;

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.test.tsx.snap

@@ -2,6 +2,10 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  Test
+  <div
+    class="pf-v6-c-accordion__item"
+  >
+    Test
+  </div>
 </DocumentFragment>
 `;

package/src/components/Accordion/__tests__/__snapshots__/AccordionToggle.test.tsx.snap

@@ -5,17 +5,17 @@ exports[`Matches the snapshot 1`] = `
   <h3>
     <button
       aria-expanded="false"
-      class="pf-v5-c-accordion__toggle"
+      class="pf-v6-c-accordion__toggle"
       id="accordion-toggle"
       type="button"
     >
       <span
-        class="pf-v5-c-accordion__toggle-text"
+        class="pf-v6-c-accordion__toggle-text"
       >
         Test
       </span>
       <span
-        class="pf-v5-c-accordion__toggle-icon"
+        class="pf-v6-c-accordion__toggle-icon"
       >
         Icon mock
       </span>

package/src/components/Accordion/examples/Accordion.md

@@ -28,3 +28,8 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 
 ```ts file="./AccordionBordered.tsx"
 ```
+
+### Toggle icon at start
+
+```ts file="./AccordionToggleIconAtStart.tsx"
+```

package/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>