切换框CSS展开全部

Question

我已经为崩溃功能创建了一个包含以下代码的页面 所以要添加问题我只需要继续添加html并更改标题号。

有没有办法可以添加点击以将所有按钮展开到此设置？

非常感谢

CSS

<style>
.toggle-box {
display: none;
}
.toggle-box + label {
cursor: pointer;
display: block;
float: left;
font-weight: bold;
line-height: 21px;
margin-bottom: 10px;
color: #000000;
width: 99%;   
border-radius: 10px;
border: 3px solid #006534;
padding: 5px 5px 5px 5px;
background: green; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white, white, #006534); /* For    Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, white, #006534); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, white, #006534); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white, white, #006534); /* Standard syntax (must be last) */
}
.toggle-box + label + div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + div {
display: block;
}
.toggle-box + label:before {
background-color: #000000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color: #FFFFFF;
content: "+";
display: block;
float: left;
font-weight: bold;
height: 20px;
line-height: 20px;
margin-left: 5px;
margin-right: 5px;
text-align: center;
width: 20px;
}
.toggle-box:checked + label:before {
content: "\2212";
}
</style>

HTML

<input class="toggle-box" type="checkbox" id="header1">
<label for="header1">
<span style="FONT-SIZE: 16px"><font color="#006534">question 1</font></span>
</label>
Content1

<input class="toggle-box" type="checkbox" id="header2">
<label for="header2">
<span style="FONT-SIZE: 16px"><font color="#006534">question 2</font></span>
</label>
Content2