重复

• 我搜索了现有的问题

最新版本

• 我测试了最新版本

摘要 💡

本质上是你当前的 accordion 组件，但垂直对齐。使用场景是无限的，但一个例子是一个英雄面板，有一个打开的 accordion ，当你点击其他 accordion 以展开时，打开的那个会关闭。另一个用途是在水平列表中有一个打开的卡片，当你悬停在相邻的卡片上时，它们会展开。
我在下面提供了多个示例：
示例1:英雄栏实现。要添加的功能：点击以展开或保持展开状态。在展开后，如果有按钮或链接等，它将变得可交互。
示例2:与上述类似，但在卡片版本中
示例3:基本的书面样式。垂直对齐的文本是一个很好的附加功能

示例 🌈

https://codepen.io/alvarotrigo/pen/eYyOLvd
https://codepen.io/alvarotrigo/pen/xxpKaXP
https://codepen.io/alvarotrigo/pen/jOYNvGP

动机 🔦

为旅行地点预订表单构建一个动态页面。我的目标是在一个巨大的位置英雄照片旁边有两个垂直 accordion 。第一个 accordion 是位置的详细信息，展开到一半并将照片缩小到50%。第二个 accordion 是预订表单，它会将图像和详细信息都折叠到左侧