pure css accordion

1CSS#container{
2  width: 400px;
3  height: auto;
4  margin: 0 auto;
5  margin-top: 3%;
6  border-top: 1px solid #bdbdbd;
7  border-left: 1px solid #bdbdbd;
8  border-right: 1px solid #bdbdbd;
9}
10.accordion label{
11  display:block;
12  background-color: #eeeeee;
13  padding: 10px;
14  color: #424242;
15  text-shadow: 0 0 2px rgba(255,255,255,0.6);
16  cursor: pointer;
17  border-bottom: 1px solid #bdbdbd;
18  border-top: 1px solid #ffffff;
19}
20
21.accordion p{
22  color: #424242;
23  padding: 10px;
24  font-size: 0.8em;
25  line-height: 1.7em;
26  border-bottom: 1px solid #bdbdbd;
27  visibility: hidden;
28  opacity: 0;
29  display: none;
30  text-align: left;
31  background-color: #fff;
32  margin-top: 0px;
33}
34
35#tm:checked ~ .hiddentext{
36  display: block;
37  visibility: visible;
38  opacity: 1;
39}
40
41input#tm{
42  display: none;
43  position: relative;
44}
45
46#tn:checked ~ .hiddentext{
47  display: block;
48  visibility: visible;
49  opacity: 1;
50}
51
52input#tn{
53  display: none;
54  position: relative;
55}
56
57#to:checked ~ .hiddentext{
58  display: block;
59  visibility: visible;
60  opacity: 1;
61}
62
63input#to{
64  display: none;
65  position: relative;
66}

1HTML<div id="container">
2<!-- Item 1 -->
3  <div class="accordion">
4    <label for="tm" class="accordionitem">
5    <h2>Item 1 <span class="arrow">»</span></h2></label>
6    <input type="checkbox" id="tm"/>
7    <p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed  into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
8  </div>
9  
10  <!-- Item 2 -->
11  <div class="accordion">
12    <label for="tn" class="accordionitem">
13    <h2>Item 2 <span class="arrow">»</span></h2></label>
14    <input type="checkbox" id="tn"/>
15    <p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
16  </div>
17  
18  <!-- Item 3 -->
19  <div class="accordion">
20    <label for="to" class="accordionitem">
21    <h2>Item 3 <span class="arrow">»</span></h2></label>
22    <input type="checkbox" id="to"/>
23    <p class="hiddentext">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>
24  </div>
25</div>