Ant Design提供了Collapse组件，可以实现折叠面板的效果。为了实现水平的折叠效果，可以通过以下代码示例来设置：

import { Collapse } from 'antd';
const { Panel } = Collapse;

function HorizontalCollapse() {
  return (
    
      
        
内容1
      
      
        
内容2
      
      
        
内容3
      
    
  );
}

通过给Collapse组件设置accordion属性，使得在一个面板打开时，其它面板自动关闭，从而实现折叠效果。而Panel组件的默认布局是竖直方向，所以折叠面板也是垂直的。通过此示例中的代码，将折叠面板改为水平显示的方式，需要添加一些样式设置：

import { Collapse } from 'antd';
const { Panel } = Collapse;

function HorizontalCollapse() {
  const customPanelStyle = {
    borderRadius: 4,
    width: '100%',
    marginBottom: 24,
    border: 0,
    overflow: 'hidden',
  };
  const customHeader = {
    backgroundColor: 'rgba(0,0,0,0.05)',
    alignItems: 'center',
    display: 'flex'
  }
  const customArrow = {
    transition: "transform 0.2s",
    marginRight: 10
  }

  const customExpandIcon = (panelProps) => {
    return panelProps.isActive ? (
      
    ) : (
      
    )
  }

  return (