css tab slides

[designedbyria]

Hi guys,

This one really has me confused. It's probably something simple that I've missed by I sure can't find it...

I've created a fiddle to show you what I'm talking about http://jsfiddle.net/j9Ftx/

You see originally this had 4 sections, these scrolled through fine with all of the links working correctly. The client has since added 1 more section, now for some reason when I add a further radio link, the whole control of the slide show goes to pot. You see what I mean http://jsfiddle.net/j9Ftx/

All I've added is an extra link and content area. Does anyone know what I'm doing wrong? If you erase the below from the jsfiddle you'll see that it works correctly, but with the label for- tab 5, it gives up. I'm at a loss... Any help greatly appreciated!

<input id="tab-5" type="radio" name="radio-set" class="tab-selector-5" />
<label for="tab-5" class="tab-label-5">POS</label>

<div class="content-5">
<h2>Fullfilment</h2>
<p>Whatever your project involves Expressive Print are experienced in delivering it for you. From daily pick and pack requirements to contract packing and bulk despatches we have the ideal space to work in - clean, modern and secure premises with packing teams who are all fully CRB checked, robust stock control systems, comprehensive insurance cover and expertise.
This ensures the right things are packed in the right order and sent the right people – simple but critical. Selecting a fulfilment partner who has strong systems with full accountability and customer service resource is vital to ensure your product’s success.</p>
</div>

[ttkim]

Take a look at these sections of your code:

.tabs input#tab-2{
	top: 40px;
}
.tabs input#tab-3{
	top: 80px;
}
.tabs input#tab-4{
	top: 120px;
}





.tabs label:first-of-type {
    z-index: 4;
}
.tab-label-2 {
    z-index: 3;
}
.tab-label-3 {
    z-index: 2;
}
.tab-label-4 {
    z-index: 1;
}




.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}

You don't have any CSS for your fifth tab. Change it to this:

.tabs input#tab-2{
	top: 40px;
}
.tabs input#tab-3{
	top: 80px;
}
.tabs input#tab-4{
	top: 120px;
}
.tabs input#tab-5{ /* ADDED THIS */
	top: 120px;
}

.tabs label:first-of-type {
    z-index: 4;
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}
.tab-label-4 {
    z-index: 1;
}
.tab-label-5 { /* ADDED THIS */
    z-index: 0;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4,
.tabs input.tab-selector-5:checked ~ .content .content-5 { /* ADDED THIS LINE */
    -webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-o-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.3s 0.3s;
    -moz-transition: all ease-out 0.3s 0.3s;
    -o-transition: all ease-out 0.3s 0.3s;
    -ms-transition: all ease-out 0.3s 0.3s;
    transition: all ease-out 0.3s 0.3s;
}