手风琴HTML+；CSS

尝试使用HTML和CSS创建手风琴

下面是代码和JSFIDLE链接

我的问题是，当你点击“关于”时，我怎样才能让“Hoho”移到左边。我想，如果我添加更多选项卡，它们各自的内容将显示在它们的正下方。。我如何才能获得从左侧开始的所有内容

提前谢谢

HTML

---

您确实将内容放入了列表项（

li

）。因此，您的内容将从其父项（项）左侧位置开始

p {
  position: absolute;
  left: 10px; /* set left position to 10px */
  opacity: 0;
  transition: all 2s;
  width: 100%;
  padding: 0;
}

但是，段落元素（

p

）具有绝对位置，您可以设置绝对左侧位置

p {
  position: absolute;
  left: 10px; /* set left position to 10px */
  opacity: 0;
  transition: all 2s;
  width: 100%;
  padding: 0;
}

当您在

href

值前面使用

#

时，浏览器将移动到

id

（或在某些浏览器中为

名称

属性）。您应该使用JavaScript

onclick

事件和

Element.style.display='block'和
Element.style.display='none'分别为。
p {
  position: absolute;
  left: 10px; /* set left position to 10px */
  opacity: 0;
  transition: all 2s;
  width: 100%;
  padding: 0;
}