css - CSS Unchecked タブ機能の問題

Question

わかりましたので、サイド カラム ウィジェットを作成しています:S と、チェックボックス関数で制御します。表示されている Tab Div は、その下の情報を覆うために絶対的な状態で配置されています。ボックスのチェックを外して、Div を再び非表示にできるようにしたいです。誰でも助けることができますか？

CSSは次のとおりです。

    .tabGroup {
    font: 10pt arial, verdana;
    width: 200px;
    height: 400px; position:relative;
}

.tabGroup > input[type="radio"] {
    position: absolute;
    left:-100px;
    top:-100px;
}

.tabGroup > input[type="radio"] + label {
    display: inline-block;
    width:180px;

    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px ;
    -webkit-border-radius: 5px;
    margin:5px 0px;
    padding: 5px 10px;
    background-color:#ddd;
}
.tabGroup > input[type="radio"]:focus + label {
    border:1px dashed black;
}
.tabGroup > input[type="radio"]:checked + label {
    background-color:white;
    font-weight: bold;
}
.tabGroup > div {
    display: none;
    border: 1px solid black;
    background-color: white;
    padding: 10px 10px;
    height: 100%;
    overflow: auto;
    position:absolute;
    top:37px;
    width:180px;
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
}
 .green{background:#b2e85b !important; border:none !important;}
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
    display: block;
}

HTMLは次のとおりです。

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" />
    <label for="rad1" class="green">Tab 1</label>
    <br/>
    <div class="tab1">Tab 1 content</div>
    Content to be covered by tab1
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    Test<br />
    </div>

ああ、それが実際に動いている：http://jsfiddle.net/ujnc7/

また、Div が表示されたときにトランジションでこれを拡張するにはどうすればよいですか?