Semantic UI 的手风琴模块可以切换展示内容的一部分 .. 先给它添加一个容器 .. 可以用一个 div 标签，加上 ui .. 还有 accordion ..

在它的里面包装的就是手风琴的每个部分 .. 每部分内容都需要一个标题，还有一块内容 .. 标题需要用一个带 title 类的容器 .. div.title .. 添加一个标题 .. 可以先添加一个向下的三角形图标 .. 一个小 i.. 加上 dropdown icon .. (#保存)

然后再输入一个标题 .. 在给它添加一块内容 .. 用一个 div 标签 .. 上面加上 content .. 这个容器里包装的就是点击标题的时候切换显示的东西 .. 用一个段落标签 .. 添加一段文字 ..

我们可以使用类似的形式，再给这个手风琴添加几块内容 .. 现在点击内容的标题 .. 并不能切换显示内容 .. 我们需要再去初始化一下 .. 添加一行 JavaScript ..

在这个页面上，我已经嵌入了 jQuery .. 还有 Semantic.js .. 先找到页面上的手风琴元素 .. .ui.accordion .. 意思是找到同时包含 ui 还有 accordion 的元素 .. 然后调用一下 Semantic UI 的 accordion() 这个方法 ..

$('.ui.accordion').accordion();

保存 .. 再点击手风琴里的内容的标题 .. 这样会显示出它下面的内容 .. 再点一下其它的标题 .. 同样会显示它下面的内容 ... 同时会把之前显示的内容隐藏起来 ..

这里我们可以手工的指定一下，让某个内容默认显示出来 .. 回到编辑器 .. 在想要默认显示的内容的标题容器上面 .. 添加一个 active .. 然后在它的 content 容器的上面，也加上一个 active .. 保存 ..

你会看到这部分内容会默认显示出来 ..