可折叠的小部件是一种流行的方式来创建可以收缩和扩展的内容部分。有很多不同的实现。在这里，多亏了checkbox输入元素、label元素和：checked伪选择器，我们将能够创建这样的小部件，而不需要额外的JavaScript。
我们的折叠包如下：
[鳄鱼代码KKzWqVX]
下面是它的HTML标记：
1<div class="wrap-collabsible">
2 <input id="collapsible" class="toggle" type="checkbox">
3 <label for="collapsible" class="lbl-toggle">More Info</label>
4 <div class="collapsible-content">
5 <div class="content-inner">
6 <p>
7 QUnit is by calling one of the object that are embedded in JavaScript, and faster JavaScript program could also used with
8 its elegant, well documented, and functional programming using JS, HTML pages Modernizr is a popular browsers without
9 plug-ins. Test-Driven Development.
10 </p>
11 </div>
12 </div>
13</div>
如果希望在默认情况下打开可折叠的，只需在复选框中设置选中属性：
1<input id="collapsible2" class="toggle" type="checkbox" checked>
[短吻鳄qBZrjqG]
<$>[注意]注意，每个标签都应该与正确的复选框相关联，因此每个复选框元素都需要一个唯一的id，并且每个标签的for属性都应该指向相应的复选框的id。<$>
设计我们的折叠式
让我们一点一点地分析一下这些款式。
首先，我们将CheckBox元素设置为Display：nere。复选框将不可见，并且将使用其标签来选中或取消选中它。稍后，您将看到，当选中隐藏复选框时，我们将使用css：ecked伪选择器以不同的方式设置样式：
1input[type='checkbox'] {
2 display: none;
3}
接下来，我们设置默认标签的样式。这里并没有发生什么特别的事情，除了我们使用display：block将标签显示为块元素之外：
1.lbl-toggle {
2 display: block;
3
4 font-weight: bold;
5 font-family: monospace;
6 font-size: 1.2rem;
7 text-transform: uppercase;
8 text-align: center;
9
10 padding: 1rem;
11
12 color: #A77B0E;
13 background: #FAE042;
14
15 cursor: pointer;
16
17 border-radius: 7px;
18 transition: all 0.25s ease-out;
19}
20
21.lbl-toggle:hover {
22 color: #7C5A0B;
23}
对于小箭头，巧妙地使用边框可以很容易地创建三角形：
1.lbl-toggle::before {
2 content: ' ';
3 display: inline-block;
4
5 border-top: 5px solid transparent;
6 border-bottom: 5px solid transparent;
7 border-left: 5px solid currentColor;
8
9 vertical-align: middle;
10 margin-right: .7rem;
11 transform: translateY(-2px);
12
13 transition: transform .2s ease-out;
14}
参考这篇来自CSS-Tricks的帖子，了解你所有的css三角需求。
你可能也注意到了，我们使用了currentColor内置变量，这样我们的三角形就和标签文本的颜色一样了。
让我们也为内部内容提供一些基本样式：
1.collapsible-content .content-inner {
2 background: rgba(250, 224, 66, .2);
3 border-bottom: 1px solid rgba(250, 224, 66, .45);
4
5 border-bottom-left-radius: 7px;
6 border-bottom-right-radius: 7px;
7 padding: .5rem 1rem;
8}
现在我们可以从有趣的部分开始了。默认情况下，可折叠内容div的最大高度值为0px ，使其完全隐藏：
1.collapsible-content {
2 max-height: 0px;
3 overflow: hidden;
4
5 transition: max-height .25s ease-in-out;
6}
当可折叠的复选框在幕后通过单击其标签被选中时，我们将把内容div设置为足够高的max-Height 值，以便它可以增长以显示其所有内部内容。
您也可以使用类似于100vh的VIEPORT units]，而不是尝试手动计算出合适的高度。使用类似100%的选项也可以，但您会失去使用过渡的能力。请注意，如果您认为可折叠的内容可能比视区更高，您可能仍然希望使用类似100%的内容。
选中复选框时，我们使用相邻的同级选择器(+)来选择我们的内容div：
1.toggle:checked + .lbl-toggle + .collapsible-content {
2 max-height: 100vh;
3}
我们使用max-Height 而不是** Height** ，因为我们希望避免使用硬编码的高度，并希望能够将任意高度的内容放入可折叠内容中。
现在我们做一些非常类似的事情，使用相邻的兄弟选择器在可折叠项展开时旋转我们的小三角形形状，并调整标签的右下角和左边框半径：
1.toggle:checked + .lbl-toggle::before {
2 transform: rotate(90deg) translateX(-3px);
3}
4
5.toggle:checked + .lbl-toggle {
6 border-bottom-right-radius: 0;
7 border-bottom-left-radius: 0;
8}
现在你就知道了！创建可折叠部分的一种非常简单的方法，根本不需要使用任何脚本。
易访问性说明
现在，我们的可折叠小部件并不是真正可访问的。我们将不得不添加一些JavaScript以使其可访问。我知道，我知道，整个事情应该是用零脚本实现的。我能说什么呢！
<$>[警告]可访问性技术正在不断改进，如果有更好的方法使其可访问性，请在下面留言。<$>
在下面的脚本中，我们选择所有切换标签并侦听按键事件。如果按下的键是Enter 键或** 空格键** ，我们将触发标签上的点击。
1let myLabels = document.querySelectorAll('.lbl-toggle');
2
3Array.from(myLabels).forEach(label => {
4 label.addEventListener('keydown', e => {
5 // 32 === spacebar
6 // 13 === enter
7 if (e.which === 32 || e.which === 13) {
8 e.preventDefault();
9 label.click();
10 };
11 });
12});
为了使标签可聚焦，我们在它上面添加了tabindex=0``：
1<label for="collapsible3" class="lbl-toggle" tabindex="0">With A11y</label>
[鳄鱼代码OJNpgpb]
所有样式
以下是全套款式，供您参考：
1.wrap-collabsible {
2 margin-bottom: 1.2rem 0;
3}
4
5input[type='checkbox'] {
6 display: none;
7}
8
9.lbl-toggle {
10 display: block;
11
12 font-weight: bold;
13 font-family: monospace;
14 font-size: 1.2rem;
15 text-transform: uppercase;
16 text-align: center;
17
18 padding: 1rem;
19
20 color: #A77B0E;
21 background: #FAE042;
22
23 cursor: pointer;
24
25 border-radius: 7px;
26 transition: all 0.25s ease-out;
27}
28
29.lbl-toggle:hover {
30 color: #7C5A0B;
31}
32
33.lbl-toggle::before {
34 content: ' ';
35 display: inline-block;
36
37 border-top: 5px solid transparent;
38 border-bottom: 5px solid transparent;
39 border-left: 5px solid currentColor;
40 vertical-align: middle;
41 margin-right: .7rem;
42 transform: translateY(-2px);
43
44 transition: transform .2s ease-out;
45}
46
47.toggle:checked + .lbl-toggle::before {
48 transform: rotate(90deg) translateX(-3px);
49}
50
51.collapsible-content {
52 max-height: 0px;
53 overflow: hidden;
54 transition: max-height .25s ease-in-out;
55}
56
57.toggle:checked + .lbl-toggle + .collapsible-content {
58 max-height: 100vh;
59}
60
61.toggle:checked + .lbl-toggle {
62 border-bottom-right-radius: 0;
63 border-bottom-left-radius: 0;
64}
65
66.collapsible-content .content-inner {
67 background: rgba(250, 224, 66, .2);
68 border-bottom: 1px solid rgba(250, 224, 66, .45);
69 border-bottom-left-radius: 7px;
70 border-bottom-right-radius: 7px;
71 padding: .5rem 1rem;
72}
🌈享受您的花式几乎只有css可折叠！