CSS3 fold and unfold effect.

<style type="text/css">

body {
  padding: 50px;
  font-family: Arial, sans-serif;
}

#folder {
  width: 300px;
  padding: 10px;
}

.fold {
  background: -webkit-linear-gradient(top, #e5e5e5, #ccc);
  background: -moz-linera-gradient(top, #e5e5e5, #ccc);
  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);
}

</style>

<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>


Output :)

1)

2)