diff --git a/assets/index.less b/assets/index.less
index 90000174..4093e0f7 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -82,7 +82,7 @@
     background-color: #f3f3f3;
   }
 
-  &-content {
+  &-panel {
     overflow: hidden;
     color: @text-color;
     padding: 0 16px;
@@ -99,7 +99,7 @@
   }
 
   &-item:last-child {
-    > .@{prefixCls}-content {
+    > .@{prefixCls}-panel {
       border-radius: 0 0 3px 3px;
     }
   }
diff --git a/assets/motion.less b/assets/motion.less
index a011851a..e85e1a6b 100644
--- a/assets/motion.less
+++ b/assets/motion.less
@@ -5,7 +5,7 @@
     transition: height 0.3s, opacity 0.3s;
   }
 
-  &-content-hidden {
+  &-panel-hidden {
     display: none;
   }
 }
diff --git a/docs/examples/_util/motionUtil.ts b/docs/examples/_util/motionUtil.ts
index c822ca9d..802a022a 100644
--- a/docs/examples/_util/motionUtil.ts
+++ b/docs/examples/_util/motionUtil.ts
@@ -15,7 +15,7 @@ const collapseMotion: CSSMotionProps = {
   onEnterEnd: skipOpacityTransition,
   onLeaveEnd: skipOpacityTransition,
   motionDeadline: 500,
-  leavedClassName: 'rc-collapse-content-hidden',
+  leavedClassName: 'rc-collapse-panel-hidden',
 };
 
 export default collapseMotion;
diff --git a/src/Panel.tsx b/src/Panel.tsx
index 62548998..613719f9 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -101,7 +101,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       </div>
       <CSSMotion
         visible={isActive}
-        leavedClassName={`${prefixCls}-content-hidden`}
+        leavedClassName={`${prefixCls}-panel-hidden`}
         {...openMotion}
         forceRender={forceRender}
         removeOnLeave={destroyInactivePanel}
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index dac6aa9e..e5fc2fca 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -34,10 +34,10 @@ const PanelContent = React.forwardRef<
     <div
       ref={ref}
       className={classnames(
-        `${prefixCls}-content`,
+        `${prefixCls}-panel`,
         {
-          [`${prefixCls}-content-active`]: isActive,
-          [`${prefixCls}-content-inactive`]: !isActive,
+          [`${prefixCls}-panel-active`]: isActive,
+          [`${prefixCls}-panel-inactive`]: !isActive,
         },
         className,
       )}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 3b23a221..1a078e26 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -52,7 +52,7 @@ describe('collapse', () => {
 
     it('panel works', () => {
       expect(collapse.container.querySelectorAll('.rc-collapse-item')).toHaveLength(3);
-      expect(collapse.container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('should render custom arrow icon correctly', () => {
@@ -82,13 +82,13 @@ describe('collapse', () => {
       const header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
+      expect(collapse.container.querySelector('.rc-collapse-panel-inactive')?.innerHTML).toBe(
         '<div class="rc-collapse-body">second</div>',
       );
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
     });
 
     it('click should not toggle disabled panel state', () => {
@@ -96,7 +96,7 @@ describe('collapse', () => {
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active').length).toBeFalsy();
     });
 
     it('should not have role', () => {
@@ -159,12 +159,12 @@ describe('collapse', () => {
 
       const { container } = render(<ControlledCollapse />);
 
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       const header = container.querySelector('.rc-collapse-header');
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(2);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(2);
       expect(onChangeSpy).toBeCalledWith(['2', '1']);
     });
   });
@@ -235,7 +235,7 @@ describe('collapse', () => {
     );
 
     // activeKey number 0, should open one item
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
   });
 
   it('click should toggle panel state', () => {
@@ -255,9 +255,9 @@ describe('collapse', () => {
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
     fireEvent.click(header);
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
     fireEvent.click(header);
-    expect(container.querySelectorAll('.rc-collapse-content-inactive').length).toBeFalsy();
+    expect(container.querySelectorAll('.rc-collapse-panel-inactive').length).toBeFalsy();
   });
 
   function runAccordionTest(element: React.ReactElement) {
@@ -272,7 +272,7 @@ describe('collapse', () => {
     });
 
     it('accordion content, should default open zero item', () => {
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
     });
 
     it('accordion item, should default open zero item', () => {
@@ -283,12 +283,12 @@ describe('collapse', () => {
       let header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
       header = collapse.container.querySelectorAll('.rc-collapse-header')?.[1];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(0);
     });
 
@@ -297,12 +297,12 @@ describe('collapse', () => {
       expect(header).toBeTruthy();
       fireEvent.click(header!);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
       header = collapse.container.querySelectorAll('.rc-collapse-header')?.[2];
       fireEvent.click(header);
       jest.runAllTimers();
-      expect(collapse.container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+      expect(collapse.container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
       expect(collapse.container.querySelectorAll('.rc-collapse-item-active')).toHaveLength(1);
     });
 
@@ -322,7 +322,7 @@ describe('collapse', () => {
       const header = collapse.container.querySelector('.rc-collapse-header');
       expect(header).toBeTruthy();
       fireEvent.click(header!);
-      const item = collapse.container.querySelector('.rc-collapse-content');
+      const item = collapse.container.querySelector('.rc-collapse-panel');
       expect(item).toBeTruthy();
       expect(item!.getAttribute('role')).toBe('tabpanel');
     });
@@ -356,7 +356,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
@@ -370,7 +370,7 @@ describe('collapse', () => {
           </Panel>
         </Collapse>,
       );
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
@@ -387,9 +387,9 @@ describe('collapse', () => {
 
       jest.runAllTimers();
 
-      expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(1);
-      expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-      const inactiveDom = container.querySelector('div.rc-collapse-content-inactive');
+      expect(container.querySelectorAll('.rc-collapse-panel')).toHaveLength(1);
+      expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+      const inactiveDom = container.querySelector('div.rc-collapse-panel-inactive');
       expect(inactiveDom).not.toBeFalsy();
       expect(getComputedStyle(inactiveDom!)).toHaveProperty('display', 'none');
     });
@@ -420,23 +420,21 @@ describe('collapse', () => {
 
     fireEvent.keyDown(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
     jest.runAllTimers();
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
 
     fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
 
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-active',
-    );
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');
 
     fireEvent.keyDown(container.querySelector('.rc-collapse-header')!, myKeyEvent);
     jest.runAllTimers();
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-content')!.className).not.toContain(
-      'rc-collapse-content-active',
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+    expect(container.querySelector('.rc-collapse-panel')!.className).not.toContain(
+      'rc-collapse-panel-active',
     );
   });
 
@@ -504,19 +502,15 @@ describe('collapse', () => {
       </Collapse>,
     );
 
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-active',
-    );
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(1);
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-active');
     expect(container.querySelector('.rc-collapse-header')?.textContent).toBe('collapse 1');
     expect(container.querySelector('.rc-collapse-header')?.querySelectorAll('.arrow')).toHaveLength(
       1,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-inactive',
-    );
+    expect(container.querySelectorAll('.rc-collapse-panel-active')).toHaveLength(0);
+    expect(container.querySelector('.rc-collapse-panel')).toHaveClass('rc-collapse-panel-inactive');
   });
 
   describe('prop: collapsible', () => {