The first two tabs show their content, but the last two don't. I've tried to look at the wiki section on CSS but I haven't figured it out yet. I am pretty sure it's a problem with CSS though. Here's my script if anyone wants to try and see what I've missed. Thanks. div.sheet-tab1,
div.sheet-tab2,
div.sheet-tab3,
div.sheet-tab4 { display: none; }
input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }
input.sheet-tab {
width: 150px;
height: 20px;
position: relative;
top: 5px;
left: 6px;
cursor: pointer;
z-index: 9999;
opacity: 0;
display: inline-block;
}
span.sheet-tab {
display: inline-block;
margin-left: -150px;
/*position: relative;*/
}
input.sheet-tab + span.sheet-tab {
/*content: attr(title);*/
border: solid 1px #a8a8a8;
border-bottom-color: black;
text-align: center;
display: inline-block;
background: #fff;
background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
width: 150px;
height: 20px;
font-size: 18px;
/*position: absolute;*/
/*top: 12px;
left: 13px;*/
display: inline-block;
}
input.sheet-tab:checked + span.sheet-tab {
background: #dcdcdc;
background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
border-bottom-color: #fff;
}
input.sheet-tab:not(:first-child) + span.sheet-tab { border-left: none; }
input.sheet-tab2 + span.sheet-tab
input.sheet-tab2:checked + span.sheet-tab
input.sheet-tab3 + span.sheet-tab { left: 313px; }
input.sheet-tab4 + span.sheet-tab { left: 463px; }
div.sheet-tab-content {
border: 1px solid #a8a8a8;
border-top-color: #000;
}
div.sheet-tab2
