0
最近兩天我一直在嘲笑我。我有兩個使用CSS獨立創建的可擴展div（無javascript），並且它們完美地工作。現在的問題是，我需要它們在頁面加載時默認關閉，但目前它們始終打開。如何讓這些可展開的div默認關閉？
.borderedblue {
padding: 5px;
border: 3px solid #55AECB;
}
.borderedbluemob {
padding: 5px;
border: 3px solid #55AECB;
}
.borderedpurple {
padding: 5px;
border: 3px solid #C2A6CD;
}
.borderedpurplemob {
padding: 5px;
border: 3px solid #C2A6CD;
}
input {
display: none;
visibility: hidden;
}
label {
display: block;
padding: 0.5em;
text-align: center;
color: #666;
}
label:hover {
color: #000;
}
label::before {
font-family: Consolas, monaco, monospace;
font-weight: bold;
font-size: 12px;
color: #ffffff;
content: "+";
vertical-align: text-top;
display: inline-block;
width: 20px;
height: 20px;
margin-right: 3px;
background: radial-gradient(ellipse at center, #5D7073 50%, transparent 50%);
}
#expand {
height: 0px;
overflow: hidden;
transition: height 0.5s;
background: #F2F2F2;
color: #2B3C41;
}
section {
padding: 0 20px;
}
#toggle:checked~#expand {
height: 250px;
}
#toggle:checked~label::before {
content: "-";
}
#toggle2:checked~#expand {
height: 350px;
}
#toggle2:checked~label::before {
content: "-";
}
#togglemob:checked~#expand {
height: 320px;
}
#togglemob:checked~label::before {
content: "-";
}
#toggle2mob:checked~#expand {
height: 550px;
}
#toggle2mob:checked~label::before {
content: "-";
}<div align="center" class="row">
<div class="col-md-6">
<div class="borderedblue">
<h2>Your bill - top tips.</h2>
<input checked="checked" id="toggle" type="checkbox" />
<label for="toggle">Find out more</label>
<div id="expand">
<ul>
<li style="text-align: left;">Register for <a class="idLink" href="#" target="_blank">MyBill</a> so you can keep tabs on how you're doing.
</li>
<li style="text-align: left;">On MyBill you'll find a full breakdown of how much data, minutes and texts you've used and how much you've left.</li>
<li style="text-align: left;">You'll receive your bill the second week of every month, with payment taken approximately 14 days later. We'll even send you a text when your bill is ready!</li>
<li style="text-align: left;">To understand the maths behind your first bill, just watch our useful video below.</li>
</ul>
</div>
</div>
</div>
<!--/.col-md-6 -->
<div class="col-md-6">
<div class="borderedpurple">
<h2>Pro rata explained</h2>
<input checked="checked" id="toggle2" type="checkbox" />
<label for="toggle2">Find out more</label>
<div id="expand">
<section>
<ul>
<li style="text-align: left;">Your billing period runs from the first day of each month to the last.</li>
<li style="text-align: left;">But not everyone joins myBill on the 1st of the month. If you didn't sign up on the 1st of the month you get a proportion of your chosen bundle (data, minutes, and texts) based on the date you joined myBill, to use for the rest of the month.</li>
<li style="text-align: left;">This is known as a pro rata amount, and you will only be charged for that proportion. If you go over that, you will be charged ;out of bundle charges.</li>
<li style="text-align: left;">You are always billed a month in advance for your plan. This means that any out of bundle charges will be charged the following month.</li>
<li style="text-align: left;">In your first full calendar month, you'll get the full bundle and be charged your full price plan amount.
</li>
</ul>
</section>
</div>
</div>
</div>
<!--/.col-md-6-->
</div>
<!--/.row-->它做什麼，我需要我只是無法弄清楚如何這兩個框設置爲關閉的頁面加載，最好不使用JavaScript。
這裏的任何幫助將是可怕的，在此先感謝！
神該死的，現在我只是覺得愚蠢和希望我可以刪除的問題！非常感謝您的幫助！ :) – DannyW86