diff --git a/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts b/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts
index fe82aee3e..d2bd1c0d6 100644
--- a/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts
+++ b/apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts
@@ -24,6 +24,9 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
   beforeEach(() => {
     cy.mockTradingPage();
+    cy.getByTestId('deal-ticket-fee-margin-required').within(() => {
+      cy.get('button').click();
+    });
   });
 
   describe('limit order', () => {
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
index 182ab55fa..16c20a96a 100644
--- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx
@@ -12,6 +12,8 @@ import { formatRange, formatValue } from '@vegaprotocol/utils';
 import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
+import * as Accordion from '@radix-ui/react-accordion';
+
 import {
   MARGIN_DIFF_TOOLTIP_TEXT,
   DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
@@ -22,6 +24,7 @@ import {
 } from '../../constants';
 import { useEstimateFees } from '../../hooks';
 import { KeyValue } from './key-value';
+import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit';
 
 const emptyValue = '-';
 
@@ -244,55 +247,72 @@ export const DealTicketMarginDetails = ({
 
   return (
     <>
-      <KeyValue
-        label={t('Margin required')}
-        value={formatRange(
-          marginRequiredBestCase,
-          marginRequiredWorstCase,
-          assetDecimals
-        )}
-        formattedValue={formatRange(
-          marginRequiredBestCase,
-          marginRequiredWorstCase,
-          assetDecimals,
-          quantum
-        )}
-        labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
-        symbol={assetSymbol}
-      />
-      <KeyValue
-        label={t('Total margin available')}
-        indent
-        value={formatValue(totalMarginAvailable, assetDecimals)}
-        formattedValue={formatValue(
-          totalMarginAvailable,
-          assetDecimals,
-          quantum
-        )}
-        symbol={assetSymbol}
-        labelDescription={TOTAL_MARGIN_AVAILABLE(
-          formatValue(generalAccountBalance, assetDecimals, quantum),
-          formatValue(marginAccountBalance, assetDecimals, quantum),
-          formatValue(currentMargins?.maintenanceLevel, assetDecimals, quantum),
-          assetSymbol
-        )}
-      />
-      {deductionFromCollateral}
-      <KeyValue
-        label={t('Current margin allocation')}
-        indent
-        onClick={
-          generalAccountBalance ? () => setBreakdownDialog(true) : undefined
-        }
-        value={formatValue(marginAccountBalance, assetDecimals)}
-        symbol={assetSymbol}
-        labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
-        formattedValue={formatValue(
-          marginAccountBalance,
-          assetDecimals,
-          quantum
-        )}
-      />
+      <Accordion.Root type="single" collapsible>
+        <Accordion.Item value="margin">
+          <KeyValue
+            id="margin-required"
+            label={
+              <Accordion.Trigger className={TOOLTIP_TRIGGER_CLASS_NAME}>
+                {t('Margin required')}
+              </Accordion.Trigger>
+            }
+            value={formatRange(
+              marginRequiredBestCase,
+              marginRequiredWorstCase,
+              assetDecimals
+            )}
+            formattedValue={formatRange(
+              marginRequiredBestCase,
+              marginRequiredWorstCase,
+              assetDecimals,
+              quantum
+            )}
+            labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
+            symbol={assetSymbol}
+          />
+          <Accordion.Content>
+            <KeyValue
+              label={t('Total margin available')}
+              indent
+              value={formatValue(totalMarginAvailable, assetDecimals)}
+              formattedValue={formatValue(
+                totalMarginAvailable,
+                assetDecimals,
+                quantum
+              )}
+              symbol={assetSymbol}
+              labelDescription={TOTAL_MARGIN_AVAILABLE(
+                formatValue(generalAccountBalance, assetDecimals, quantum),
+                formatValue(marginAccountBalance, assetDecimals, quantum),
+                formatValue(
+                  currentMargins?.maintenanceLevel,
+                  assetDecimals,
+                  quantum
+                ),
+                assetSymbol
+              )}
+            />
+            {deductionFromCollateral}
+            <KeyValue
+              label={t('Current margin allocation')}
+              indent
+              onClick={
+                generalAccountBalance
+                  ? () => setBreakdownDialog(true)
+                  : undefined
+              }
+              value={formatValue(marginAccountBalance, assetDecimals)}
+              symbol={assetSymbol}
+              labelDescription={MARGIN_ACCOUNT_TOOLTIP_TEXT}
+              formattedValue={formatValue(
+                marginAccountBalance,
+                assetDecimals,
+                quantum
+              )}
+            />
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion.Root>
       {projectedMargin}
       <KeyValue
         label={t('Liquidation price estimate')}
diff --git a/libs/deal-ticket/src/components/deal-ticket/key-value.tsx b/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
index 42f6a5e6f..bba977187 100644
--- a/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
+++ b/libs/deal-ticket/src/components/deal-ticket/key-value.tsx
@@ -3,7 +3,8 @@ import classnames from 'classnames';
 import type { ReactNode } from 'react';
 
 export interface KeyValuePros {
-  label: string;
+  id?: string;
+  label: ReactNode;
   value?: string | null | undefined;
   symbol: string;
   indent?: boolean | undefined;
@@ -13,6 +14,7 @@ export interface KeyValuePros {
 }
 
 export const KeyValue = ({
+  id,
   label,
   value,
   labelDescription,
@@ -31,9 +33,11 @@ export const KeyValue = ({
   );
   return (
     <div
-      data-testid={
-        'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
-      }
+      data-testid={`deal-ticket-fee-${
+        !id && typeof label === 'string'
+          ? label.toLocaleLowerCase().replace(/\s/g, '-')
+          : id
+      }`}
       key={typeof label === 'string' ? label : 'value-dropdown'}
       className={classnames(
         'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
diff --git a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx
index 9c629d785..fdbae9814 100644
--- a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx
+++ b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx
@@ -20,6 +20,9 @@ export interface TooltipProps {
   sideOffset?: number;
 }
 
+export const TOOLTIP_TRIGGER_CLASS_NAME =
+  'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed';
+
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
   children,
@@ -32,10 +35,7 @@ export const Tooltip = ({
   description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
       <Root open={open}>
-        <Trigger
-          asChild
-          className="underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed"
-        >
+        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME}>
           {children}
         </Trigger>
         {description && (