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 出现时，我将如何在转换中扩展它？

Answer 1

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

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