收起展开显示隐藏指定内容

 

 定义：

const [showInvitationInfo, setShowInvitationInfo] = useState(true)

页面：

{showInvitationInfo?<div className={style.collapse} onClick={()=>setShowInvitationInfo(!showInvitationInfo)}>
                  <div className={style.collapseText}>收起</div>
                  <DoubleRightOutlined className={`${style.collapseIcon} ${showInvitationInfo && style.iconExpand}`}/>
                </div>:<div className={style.collapse} onClick={()=>setShowInvitationInfo(!showInvitationInfo)}>
                  <div className={style.collapseText}>展开</div>
                  <DoubleRightOutlined className={`${style.collapseIcon} ${!showInvitationInfo && style.iconCollapse}`}/>
                </div>}

CSS

.collapse {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 16px;
    margin-top: 4px;
    .collapseText {
      font-size: 12px;
      font-weight: 400;
      color: #262626;
      white-space: nowrap;
    }
    .collapseIcon {
      width: 10px;
      height: 10px;
      font-size: 12px;
      color: #B4B6C0;
      margin-left: 4px;
    }
    .iconCollapse {
      margin-bottom: 4px;
      transform: rotate(90deg);
    }
    .iconExpand {
      transform: rotate(-90deg);
    }
  }

  

定义页面展示内容区域

{showInvitationInfo?<div className={style.cardContent}></div>}