手风琴折叠效果想必大家应该都很熟悉，就是允许我们点击标题时显示和隐藏内容。

在Markdown中目前没有专门的语法来实现手风琴折叠效果，需要借助html5的details标签。

长久以来，手风琴折叠效果在页面上的实现都是用JS实现的。而现在，details标签打破了这个规则，可以让我们抛开JS来实现折叠效果。使用之前我们来了解一下details的作用。

details标签

下面是一个简单示例：

<details>
    这里是详情内容
</details>

效果：

默认折叠标题显示的是详情，点击详情会将折叠面板里的内容显示。

一般情况下，我们的标题是需要定制的，这个时候我们要在details标签中放入summary标签，summary标签用来显示折叠面板的标题。

<details>
    <summary>分组标题</summary>
    <p>这里是详情内容</p>
</details>

效果：

默认折叠面板里的内容是隐藏的，有时候我们需要在打开页面时面板就是展开的，这个时候我们可以给details添加上open属性。open属性，用来控制面板默认的展开状态。

<details open>
    <summary>分组标题</summary>
    <p>这里是详情内容</p>
</details>

效果：

兼容性

需要注意的是，在使用html标签嵌入到Markdown文档中不仅要了解markdownb编辑器对语法的支持程度，还要了解浏览前对嵌入标签的支持程度。

details标签是一个比较新的语法，虽然经历了浏览器多个版本的迭代支持，但如果你的文章面向的用户还有很多人使用低版本浏览器，那么就需要斟酌一下，是不是适合使用这种方式来实现折叠效果。

结语

总的来说，details标签的兼容性还算不错，现在web标准的更新速度催促着浏览器的版本更加快速的迭代，旧版本的浏览器我们基本上不用考虑，破旧的IE已被微软放弃完全可以忽略。