CSS未選中選項卡功能問題

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出現？

Answer 1

try to solve this problem with help of chkbox. check this one. 

http://jsfiddle.net/ujnc7/1/