本指导假定你对wikidot代码、HTML和CSS都具有良好的理解。1如果你是这方面的新手，你可能会想先看看你与高级格式和高级格式手册。
内容
这是什么？
可折叠列表容器foldable list containers（在此指导中将被称为FLC）的预期作用，在你与高级格式的第二节中有所展示。这也是Boyu12制作的嵌套折叠的基础。
通常情况下，FLC只是一种替代性的折叠功能。不过，如果你把折叠功能剥离出来，它们的作用实际上就只是在你点击按键时切换一个元素的类别。为了了解这一点，让我们看看最基础的FLC例子背后发生了什么。
[[div class="foldable-list-container"]]
* 外部短句
* 内部短句
[[/div]]- 外部短句
- 内部短句
如果我们在这个元素折叠起来的时候查看它的源，它看起来是这样的：
<div class="foldable-list-container"> <ul> <li class="folded"> <a href="javascript:;">外部短句</a> <ul style="display: none;"> <li>内部短句</li> </ul> </li> </ul> </div>
展开的时候则是这样的：
<div class="foldable-list-container"> <ul> <li class="unfolded"> <a href="javascript:;">外部短句</a> <ul style=""> <li>内部短句</li> </ul> </li> </ul> </div>
我们点下“外部短句”的时候，第一个列表项元素的类在“folded”和“unfolded”中切换。
它有什么用？
让读者能够将一个元素在两种不同状态间切换可以产生一些有趣的用例。比方说，你有一篇很酷的手写日记，是某种怪物的受害者写的，你想把它添加到文章中去；但为了方便理解，你也想给读者一个直接阅读转录版本的选择。
或者你也可能想让读者在“提交凭证”后不被切换到另一个页面，而是就地让按键变成供阅读的内容。
-
附录 XXXX.X：[已编辑]
附录 XXXX.X：超级机密记录。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Vulputate dignissim suspendisse in est ante in nibh. Mattis rhoncus urna neque viverra. Vulputate mi sit amet mauris commodo quis imperdiet massa. Nulla facilisi morbi tempus iaculis urna id volutpat. Non odio euismod lacinia at quis risus sed vulputate. Sem integer vitae justo eget magna fermentum iaculis.3
FLC可以为你提供这些功能！这只是几个基础例子，还有很多应用方法。如果你对CSS很在行，你甚至可以加入一些很酷的动画！
我该怎么使用它？
准备工作
我们首先要使用wikidot的本地代码把那个基础FLC例子的源代码重写一遍。
[[div_ class="foldable-list-container"]]
[[ul]]
[[li class="folded"]]
[# 外部短句]
[[ul]]
[[li]]内部短句[[/li]]
[[/ul]]
[[/li]]
[[/ul]]
[[/div]]- 外部短句
- 内部短句
有趣的是，包含foldable-list-container类的div块并不一定要在层次结构的顶端。只要它包含着链接单元，列表项元素的类就可以无障碍地在folded和unfolded之间切换。但这确实会破坏内部短句的显示方式，那么我们来避免这种情况。
[[ul]]
[[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# 外部短句]
[[/div]]
[[/li]]
[[/ul]]它看起来好像什么用也没有，但你每次点击它，类都在被切换。如果你想确认它有没有工作，你可以查看页面源代码。
最后，你可能想要去掉列表的格式，在上面搞点小装饰。这可以通过样式化div包装器来做到。
[[module CSS]]
.flc-cleaner > ul,
.flc-cleaner > ul > li {
display: block;
line-height: normal;
list-style: none;
margin: 0;
padding: 0;
}
.flc-cleaner .foldable-list-container {
display: inline-block;
}
[[/module]]
[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# 切换]
[[/div]]
[[/li]][[/ul]][[/div]]值得注意的是，这个样式化也会影响flc-cleaner div里的所有列表，但这在大部分情况下都是一个好模板。
应用
利用切换类是为了使用选择器。通过选中folded类下的元素X并对其应用一个样式，然后在unfolded类下选中相同的元素并应用一个不同的样式，元素X的样式将随着列表项元素的类变化。
[[module CSS]]
li.folded > .colorme { color: blue; }
li.unfolded > .colorme { color: orange; }
[[/module]]
[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]
[[div class="colorme"]]
**看看这些酷炫的颜色！**
[[/div]]
[[/li]][[/ul]][[/div]]-
看看这些酷炫的颜色！
如果你想要在文章中使用多于一个FLC，你应该把样式化的范围限制在一个包装器类里。
[[module CSS]]
.colorme-wrapper li.folded > .colorme { color: blue; }
.colorme-wrapper li.unfolded > .colorme { color: orange; }
[[/module]]
[[div_ class="flc-cleaner colorme-wrapper"]]
[[ul]][[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# 切换]
[[/div]]
[[div class="colorme"]]
**看看这些酷炫的颜色！**
[[/div]]
[[/li]][[/ul]][[/div]]
[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# 切换]
[[/div]]
[[div class="colorme"]]
我没有颜色 :(
[[/div]]
[[/li]][[/ul]][[/div]]-
看看这些酷炫的颜色！
-
我没有颜色 :(
前面的文档切换器和机密内容掩盖例子都使用了相同的技术，有条件地切换元素的可见性（而非颜色）。你也可以毫无困难地改变包含按键的元素的样式，或者是按键本身的样式！
总结
这就是全部内容了！剩下的就是CSS的事了，尽情尝试样式化吧！