Theodore Steiner Theodore Steiner - 7 months ago 10
HTML Question

Tabbed Nav Not showing Content

Can someone help me, I'm at my wits end. I've created a CSS3 tabbed nav set up. When the tab is clicked it should be showing the base content -- at this point it's only one line. I'm missing something and I just can't see it. I'm not looking to implement JS or Jquery this should work but it's not.

Here's the code:
HTML:

<ul class="tabs">
<li>
<input type="radio" name="tab" id="tab1" checked />
<label for="tab1">Personal Information</label>
<div class="tab-content" id="tab1-content">Here is the content for tab 1</div>
</li>


<li>
<input type="radio" name="tab" id="tab2" />
<label for="tab2">Academic Information</label>
<div class="tab-content" id="tab2-content">Here is the content for tab 2</div>
</li>



<li>
<input type="radio" name="tab" id="tab3" />
<label for="tab3">OECTA Involvement</label>
<div class="tab-content" id="tab3-content">Here is the content for tab 3</div>
</li>




Css:

.tabs
{
position: relative;
display: block;
height: 40px;
width: 600px;
margin: 75px auto;
list-style: none;
float: none;
}

.tabs input[type="radio"]
{
display: none;
}

.tabs label
{
float: left;
display: block;
position: relative;
height: 40px;
width: 160px;
display:block;
padding: 10px 20px;
font-weight: normal;
font-family: 'Lucida Sans';
font-size: 17px;
background: #f2f2f2;
line-height: 20px;
text-align: center;
cursor: pointer;
color: #bfbfbf;
box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1);
transition: all 0.1s ease-in-out;
top: 2px;
}

.tabs label:hover
{
background: rgba(255,255,255,0.5);
top:0;
}

.tab-content
{
position: absolute;
top: 100px;
left: 0;
display: none;
}

[id^=tab]:checked+label
{
background: rgba(255,255,255,0.5);
top:0;
}

[id^=tab]:checked~[id^=tab-content]
{
display: block;
}

Answer

It's only your last css selector

[id^=tab]:checked~.tab-content{
    display: block;
}

[id^=tab-content] selects all elements with an attribute ID starting with tab-content which is not what you want.