0

Ok so i'm creating a side column widget thing :S and its controlled with a Checkbox function. The Tab Div that is displayed is being placed in an absolute state to cover over the info underneath. I want to be able to uncheck the box and hide the Div again. Can anyone help?

Heres the 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;
}

Heres The 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>

Oh and heres it in action: http://jsfiddle.net/ujnc7/

Oh also how would I go about expanding this in a transition when the Div Appears?

4

1 回答 1

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

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

于 2013-04-29T11:21:35.583 回答