CSS未选中选项卡函数问题

好的，我正在创建一个侧栏小部件thing:S，它由一个复选框函数控制。显示的选项卡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>

表1


表1内容
表1中包含的内容
测试

测试

测试

测试

测试

哦，这就是它的作用：

哦，还有，当Div出现时，我将如何在转换中扩展它

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

---

是否允许使用jQuery/js？如果我可以问的话。我想避免，但如果有人能建议最干净的方法，我愿意尝试D