CSS3 fold and unfold effect - html

Question

I need a little bit of help.
I am using the following html and css in CodePen. Basically I need it to start in a folded state rather than open.
I need the folder cover (top div) to always be unfolded as this will show information on how to open the content as the cover needs to contain a fold/unfold link. Also when I enter content in to each of the fold divs the content runs over to the next div, rather than expanding the current div as you will see in my edited CodePen below.
This would also need to be resolved so that it does not cause an issue when it is folded as the divs become misaligned.
Original CodePen
http://codepen.io/boxabrain/pen/Hhugb/
My edited CodePen
http://codepen.io/anon/pen/gmAnK
HTML
<div id="folder">
<input type="checkbox" id="toggle"/> <label for="toggle" id="toggle- label">fold/unfold</label>
<div class="fold">
Element 1
</div>
<div class="fold">
Element 2
</div>
<div class="fold">
Element 3
</div>
<div class="fold">
Element 4
</div>
<div class="fold">
Element 5
</div>
<div class="fold">
Element 6
</div>
<div class="fold">
Element 7
</div>
<div class="fold">
Element 8
</div>
</div>
CSS
body {
padding: 50px;
font-family: Arial, sans-serif;
}
#folder {
width: 300px;
padding: 10px;
}
.fold {
background: #000;
background: #000;
padding: 10px;
width: 280px;
height: 80px;
color: #999;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
transition: all 0.3s linear;
}
#toggle { display: none; }
#toggle-label {
display: inline-block;
cursor: pointer;
margin-bottom: 50px;
border: 1px solid #e5e5e5;
font-size: 11px;
color: #999;
background: #fff;
text-transform: uppercase;
border-radius: 5px;
padding: 5px;
}
#toggle:checked ~ .fold:nth-child(odd) {
margin-top: -82px;
-webkit-transform: perspective(800px) rotateX(-80deg);
-moz-transform: perspective(800px) rotateX(-80deg);
transform: perspective(800px) rotateX(-80deg);
}
#toggle:checked ~ .fold:nth-child(even) {
margin-top: -84px;
-webkit-transform: perspective(800px) rotateX(80deg);
-moz-transform: perspective(800px) rotateX(80deg);
transform: perspective(800px) rotateX(80deg);
}
Can anyone help me?
Thanks in advance

Answer 1

To start out in a folded state, just add :not selector like this:
#toggle:not(:checked) ~ .fold:nth-child(odd)
#toggle:not(:checked) ~ .fold:nth-child(even)
About content overflow - you need to adjust it by hands if you don't want to use Js (play with individual .folds heights and rotateX).