使用 HTML 创建可折叠的交互式组件，一行 JS 代码也不用写

如果你想创建一个可折叠的交互式组件，使用

元素即可，一行 JavaScript 也不用写。

组件定义了一个可折叠的容器，它的第一个元素必须是

元素，代表标题，用户点击它可以控制区域的显示和隐藏。后面的元素随便写，它们会出现在打开的面板中。


  我是标题
  
    我是具体的内容，我是第一段。

如果你想让

默认打开，添加 open 属性。


  我是标题
  
    我是具体的内容，我是第一段。

如果把多个

放在一起，并且给它们设置相同的 name 属性，就可以形成联动效果。点击其中一个，其余面板自动关闭。


  我是标题 1
  
    我是具体的内容，我是第一段。
  



  我是标题 2
  
    我是具体的内容，我是第二段。
  



  我是标题 3
  
    我是具体的内容，我是第三段。

默认样式比较简陋，使用 CSS 给它们化化妆。

details {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
}

summary {
  cursor: pointer;
}

details[open] {
  padding: 0;
}

details[open] summary {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  background: skyblue;
}

details > p {
  padding: 10px;
}