diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
index 6689cfa5056..09b2770008e 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
@@ -3,7 +3,6 @@ import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarContentContext, ToolbarContext } from './ToolbarUtils';
 import { formatBreakpointMods } from '../../helpers/util';
-import { ToolbarExpandableContent } from './ToolbarExpandableContent';
 import { PageContext } from '../Page/PageContext';
 
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
@@ -33,8 +32,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   clearFiltersButtonText?: string;
   /** Id of the parent Toolbar component */
   toolbarId?: string;
-  /** Custom expandable content for the toolbar, for non-managed multiple toolbar toggle groups. */
-  expandableContent?: React.ReactNode;
 }
 
 export class ToolbarContent extends React.Component<ToolbarContentProps> {
@@ -60,7 +57,6 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       showClearFiltersButton,
       clearFiltersButtonText,
       alignSelf,
-      expandableContent,
       ...props
     } = this.props;
 
@@ -73,6 +69,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               className
             )}
+            ref={this.expandableContentRef}
             {...props}
           >
             <ToolbarContext.Consumer>
@@ -80,6 +77,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                 clearAllFilters: clearAllFiltersContext,
                 clearFiltersButtonText: clearFiltersButtonContext,
                 showClearFiltersButton: showClearFiltersButtonContext,
+                isExpanded: isExpandedContext,
                 toolbarId: toolbarIdContext
               }) => {
                 const expandableContentId = `${
@@ -90,7 +88,11 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     value={{
                       expandableContentRef: this.expandableContentRef,
                       expandableContentId,
-                      chipContainerRef: this.chipContainerRef
+                      chipContainerRef: this.chipContainerRef,
+                      isExpanded: isExpanded || isExpandedContext,
+                      clearAllFilters: clearAllFilters || clearAllFiltersContext,
+                      clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext,
+                      showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext
                     }}
                   >
                     <div
@@ -106,19 +108,6 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                     >
                       {children}
                     </div>
-                    {expandableContent ? (
-                      expandableContent
-                    ) : (
-                      <ToolbarExpandableContent
-                        id={expandableContentId}
-                        isExpanded={isExpanded}
-                        expandableContentRef={this.expandableContentRef}
-                        chipContainerRef={this.chipContainerRef}
-                        clearAllFilters={clearAllFilters || clearAllFiltersContext}
-                        showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
-                        clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
-                      />
-                    )}
                   </ToolbarContentContext.Provider>
                 );
               }}
diff --git a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
index 3797d42e518..b76d02e494f 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarExpandableContent.tsx
@@ -37,6 +37,7 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
 
   render() {
     const {
+      children,
       className,
       expandableContentRef,
       chipContainerRef,
@@ -58,7 +59,7 @@ export class ToolbarExpandableContent extends React.Component<ToolbarExpandableC
         ref={expandableContentRef}
         {...props}
       >
-        <ToolbarGroup />
+        <ToolbarGroup>{children}</ToolbarGroup>
         {numberOfFilters > 0 && (
           <ToolbarGroup className={styles.modifiers.chipContainer}>
             <ToolbarGroup ref={chipContainerRef} />
diff --git a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
index 9d2d5363f0e..74f9af0371b 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarToggleGroup.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import styles from '@patternfly/react-styles/css/components/Toolbar/toolbar';
 import { css } from '@patternfly/react-styles';
 import { ToolbarGroupProps } from './ToolbarGroup';
@@ -8,6 +7,8 @@ import { Button } from '../Button';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
 import { formatBreakpointMods, toCamel, canUseDOM } from '../../helpers/util';
 import { PageContext } from '../Page/PageContext';
+import { ToolbarExpandableContent } from './ToolbarExpandableContent';
+import { Popper } from '../../helpers';
 
 export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
   /** Flag indicating when toggle group is expanded for non-managed toolbar toggle groups. */
@@ -50,12 +51,19 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
     '2xl'?: 'spaceItemsNone' | 'spaceItemsSm' | 'spaceItemsMd' | 'spaceItemsLg';
   };
-  /** Reference to a custom expandable content group, for non-managed multiple toolbar toggle groups. */
-  expandableContentRef?: React.RefObject<any>;
+  /** Reference to a chip container group for filters inside the toolbar toggle group */
+  chipContainerRef?: React.RefObject<any>;
+  /** Optional callback for clearing all filters in the toolbar toggle group */
+  clearAllFilters?: () => void;
+  /** Flag indicating that the clear all filters button should be visible in the toolbar toggle group */
+  showClearFiltersButton?: boolean;
+  /** Text to display in the clear all filters button of the toolbar toggle group */
+  clearFiltersButtonText?: string;
 }
-
 export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
   static displayName = 'ToolbarToggleGroup';
+  toggleRef = React.createRef<HTMLButtonElement>();
+  expandableContentRef = React.createRef<HTMLDivElement>();
 
   isContentPopup = () => {
     const viewportSize = canUseDOM ? window.innerWidth : 1200;
@@ -75,8 +83,11 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       className,
       children,
       isExpanded,
-      expandableContentRef,
       onToggle,
+      chipContainerRef,
+      clearAllFilters,
+      showClearFiltersButton,
+      clearFiltersButtonText,
       ...props
     } = this.props;
 
@@ -89,27 +100,23 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
       <PageContext.Consumer>
         {({ width, getBreakpoint }) => (
           <ToolbarContext.Consumer>
-            {({ isExpanded: managedIsExpanded, toggleIsExpanded: managedOnToggle }) => {
-              const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
+            {({ toggleIsExpanded: managedOnToggle }) => {
               const _onToggle = onToggle !== undefined ? onToggle : managedOnToggle;
 
               return (
                 <ToolbarContentContext.Consumer>
-                  {({ expandableContentRef: managedExpandableContentRef, expandableContentId }) => {
-                    const _contentRef =
-                      expandableContentRef !== undefined ? expandableContentRef : managedExpandableContentRef;
-
-                    if (
-                      isExpanded === undefined &&
-                      managedExpandableContentRef.current &&
-                      managedExpandableContentRef.current.classList
-                    ) {
-                      if (_isExpanded) {
-                        managedExpandableContentRef.current.classList.add(styles.modifiers.expanded);
-                      } else {
-                        managedExpandableContentRef.current.classList.remove(styles.modifiers.expanded);
-                      }
-                    }
+                  {({
+                    expandableContentRef,
+                    expandableContentId,
+                    chipContainerRef: managedChipContainerRef,
+                    isExpanded: managedIsExpanded,
+                    clearAllFilters: clearAllFiltersContext,
+                    clearFiltersButtonText: clearFiltersButtonContext,
+                    showClearFiltersButton: showClearFiltersButtonContext
+                  }) => {
+                    const _isExpanded = isExpanded !== undefined ? isExpanded : managedIsExpanded;
+                    const _chipContainerRef =
+                      chipContainerRef !== undefined ? chipContainerRef : managedChipContainerRef;
 
                     const breakpointMod: {
                       md?: 'show';
@@ -119,6 +126,36 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                     } = {};
                     breakpointMod[breakpoint] = 'show';
 
+                    const expandableContent = (
+                      <ToolbarExpandableContent
+                        id={expandableContentId}
+                        expandableContentRef={this.expandableContentRef}
+                        isExpanded={_isExpanded}
+                        clearAllFilters={clearAllFilters || clearAllFiltersContext}
+                        showClearFiltersButton={showClearFiltersButton || showClearFiltersButtonContext}
+                        clearFiltersButtonText={clearFiltersButtonText || clearFiltersButtonContext}
+                        chipContainerRef={_chipContainerRef}
+                      >
+                        {children}
+                      </ToolbarExpandableContent>
+                    );
+
+                    const toggleButton = (
+                      <div className={css(styles.toolbarToggle)}>
+                        <Button
+                          variant="plain"
+                          onClick={_onToggle}
+                          aria-label="Show Filters"
+                          {...(_isExpanded && { 'aria-expanded': true })}
+                          aria-haspopup={_isExpanded && this.isContentPopup()}
+                          aria-controls={expandableContentId}
+                          ref={this.toggleRef}
+                        >
+                          {toggleIcon}
+                        </Button>
+                      </div>
+                    );
+
                     return (
                       <div
                         className={css(
@@ -135,24 +172,15 @@ export class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps>
                         )}
                         {...props}
                       >
-                        <div className={css(styles.toolbarToggle)}>
-                          <Button
-                            variant="plain"
-                            onClick={_onToggle}
-                            aria-label="Show Filters"
-                            {...(_isExpanded && { 'aria-expanded': true })}
-                            aria-haspopup={_isExpanded && this.isContentPopup()}
-                            aria-controls={expandableContentId}
-                          >
-                            {toggleIcon}
-                          </Button>
-                        </div>
-                        {_isExpanded
-                          ? (ReactDOM.createPortal(
-                              children,
-                              _contentRef.current.firstElementChild
-                            ) as React.ReactElement)
-                          : children}
+                        <Popper
+                          appendTo={expandableContentRef.current}
+                          triggerRef={expandableContentRef}
+                          trigger={toggleButton}
+                          popper={expandableContent}
+                          popperRef={this.expandableContentRef}
+                          isVisible={_isExpanded}
+                        />
+                        {!_isExpanded && children}
                       </div>
                     );
                   }}
diff --git a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx
index 9ee37c99f85..6aec87bf74b 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarUtils.tsx
@@ -31,12 +31,17 @@ interface ToolbarContentContextProps {
   expandableContentRef: RefObject<HTMLDivElement>;
   expandableContentId: string;
   chipContainerRef: RefObject<any>;
+  isExpanded?: boolean;
+  clearAllFilters?: () => void;
+  clearFiltersButtonText?: string;
+  showClearFiltersButton?: boolean;
 }
 
 export const ToolbarContentContext = React.createContext<ToolbarContentContextProps>({
   expandableContentRef: null,
   expandableContentId: '',
-  chipContainerRef: null
+  chipContainerRef: null,
+  clearAllFilters: () => {}
 });
 
 export const globalBreakpoints = {
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
index 044e3353e87..a6d292adf1f 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/Generated/__snapshots__/ToolbarContent.test.tsx.snap
@@ -12,14 +12,6 @@ exports[`ToolbarContent should match snapshot (auto-generated) 1`] = `
         ReactNode
       </div>
     </div>
-    <div
-      class="pf-v5-c-toolbar__expandable-content"
-      id="string-expandable-content-0"
-    >
-      <div
-        class="pf-v5-c-toolbar__group"
-      />
-    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx
index 582485299aa..57c83cdce8a 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx
+++ b/packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx
@@ -65,7 +65,7 @@ describe('Toolbar', () => {
             <ToolbarFilter
               chips={['New', 'Pending']}
               deleteChip={(category, chip) => {}}
-              deleteChipGroup={category => {}}
+              deleteChipGroup={(category) => {}}
               categoryName="Status"
             >
               test content
@@ -102,8 +102,7 @@ describe('Toolbar', () => {
     );
 
     expect(asFragment()).toMatchSnapshot();
-    // Expecting 2 matches for text because the buttons also exist in hidden expandable content for mobile view
-    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(2);
-    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(2);
+    expect(screen.getAllByRole('button', { name: 'Save filters' }).length).toBe(1);
+    expect(screen.getAllByRole('button', { name: 'Clear all filters' }).length).toBe(1);
   });
 });
diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx
index a86b1da1c86..91aa6e4b217 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx
+++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarToggleGroup.test.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { ToolbarToggleGroup } from '../ToolbarToggleGroup';
-import { ToolbarContentContext } from '../ToolbarUtils';
+import { Toolbar } from '../Toolbar';
+import { ToolbarContent } from '../ToolbarContent';
 
 describe('ToolbarToggleGroup', () => {
   it('should warn on bad props', () => {
     const myMock = jest.fn() as any;
     global.console = { error: myMock } as any;
 
+    const items = (
+      <React.Fragment>
+        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null}>
+          test
+        </ToolbarToggleGroup>
+      </React.Fragment>
+    );
+
     render(
-      <ToolbarContentContext.Provider
-        value={{
-          expandableContentId: 'some-id',
-          expandableContentRef: { current: undefined },
-          chipContainerRef: { current: undefined }
-        }}
-      >
-        <ToolbarToggleGroup breakpoint={undefined as 'xl'} toggleIcon={null} />
-      </ToolbarContentContext.Provider>
+      <Toolbar id="toolbar-with-filter" className="pf-m-toggle-group-container" collapseListedFiltersBreakpoint="xl">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
     );
 
     expect(myMock).toHaveBeenCalled();
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 31e809b78b6..13b971baed6 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -34,14 +34,6 @@ exports[`Toolbar should render inset 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-0"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"
@@ -99,49 +91,6 @@ exports[`Toolbar should render with custom chip content 1`] = `
           </div>
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-with-filter-expandable-content-3"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-        <div
-          class="pf-v5-c-toolbar__group pf-m-chip-container"
-        >
-          <div
-            class="pf-v5-c-toolbar__group"
-          />
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Save filters
-            </button>
-          </div>
-          <div
-            class="pf-v5-c-toolbar__item"
-          >
-            <button
-              aria-disabled="false"
-              class="pf-v5-c-button pf-m-link pf-m-inline"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
-              data-ouia-component-type="PF5/Button"
-              data-ouia-safe="true"
-              type="button"
-            >
-              Clear all filters
-            </button>
-          </div>
-        </div>
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content"
@@ -385,14 +334,6 @@ exports[`Toolbar should render with page inset flag 1`] = `
           Test 3 
         </div>
       </div>
-      <div
-        class="pf-v5-c-toolbar__expandable-content"
-        id="toolbar-expandable-content-1"
-      >
-        <div
-          class="pf-v5-c-toolbar__group"
-        />
-      </div>
     </div>
     <div
       class="pf-v5-c-toolbar__content pf-m-hidden"
diff --git a/packages/react-core/src/components/Toolbar/examples/Test.tsx b/packages/react-core/src/components/Toolbar/examples/Test.tsx
index 368e04bca75..e4ad498ca23 100644
--- a/packages/react-core/src/components/Toolbar/examples/Test.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/Test.tsx
@@ -12,15 +12,12 @@ import {
   SelectList,
   SelectOption,
   ToolbarFilter,
-  ToolbarExpandableContent,
   Badge
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 export const Test: React.FunctionComponent = () => {
-  const statusExpandableContentRef = React.useRef<HTMLDivElement>();
   const statusChipContainerRef = React.useRef<HTMLDivElement>();
-  const riskExpandableContentRef = React.useRef<HTMLDivElement>();
   const riskChipContainerRef = React.useRef<HTMLDivElement>();
 
   const [isStatusGroupExpanded, setIsStatusGroupExpanded] = React.useState(false);
@@ -222,43 +219,21 @@ export const Test: React.FunctionComponent = () => {
     </ToolbarGroup>
   );
 
-  const toggleExpandGroups = (
-    <>
-      <ToolbarExpandableContent // Expandable content group for the first toggle group
-        id={'expandable-1'}
-        isExpanded={isStatusGroupExpanded}
-        expandableContentRef={statusExpandableContentRef}
-        chipContainerRef={statusChipContainerRef}
-        showClearFiltersButton
-        clearAllFilters={() => onDeleteGroup('Status')}
-        clearFiltersButtonText="Clear status filter"
-      />
-      <ToolbarExpandableContent // Expandable content group for the second toggle group
-        id={'expandable-2'}
-        isExpanded={isRiskGroupExpanded}
-        expandableContentRef={riskExpandableContentRef}
-        chipContainerRef={riskChipContainerRef}
-        showClearFiltersButton
-        clearAllFilters={() => onDeleteGroup('Risk')}
-        clearFiltersButtonText="Clear risk filter"
-      />
-    </>
-  );
-
   return (
     <Toolbar id="toolbar-multiple-toggle-groups" className="pf-m-toggle-group-container">
-      <ToolbarContent
-        expandableContent={toggleExpandGroups} // Required to bypass default expandable content div
-      >
+      <ToolbarContent>
         <ToolbarToggleGroup
           isExpanded={isStatusGroupExpanded} // Required to control expanded state
           onToggle={() => {
             setIsStatusGroupExpanded(!isStatusGroupExpanded);
             setIsRiskGroupExpanded(false);
           }} // Required to control expanded state
-          expandableContentRef={statusExpandableContentRef} // Required to link the toggle group to a specific expandable content group
           toggleIcon={<FilterIcon />}
           breakpoint="md"
+          chipContainerRef={statusChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Status')}
+          clearFiltersButtonText="Clear status filter"
         >
           {statusToggleGroupItems}
         </ToolbarToggleGroup>
@@ -268,9 +243,12 @@ export const Test: React.FunctionComponent = () => {
             setIsRiskGroupExpanded(!isRiskGroupExpanded);
             setIsStatusGroupExpanded(false);
           }} // Required to control expanded state
-          expandableContentRef={riskExpandableContentRef} // Required to link the toggle group to a specific expandable content group
           toggleIcon={<FilterIcon />}
           breakpoint="xl"
+          chipContainerRef={riskChipContainerRef}
+          showClearFiltersButton
+          clearAllFilters={() => onDeleteGroup('Risk')}
+          clearFiltersButtonText={'Clear risk filter'}
         >
           {riskToggleGroupItems}
         </ToolbarToggleGroup>