For some reason when I try and use multiple pages I can get it to work in many ways, but for some reason the second page ALSO shows up on the first page...everything else works as intended <div class="charsheet">
<img class="sheet-logo" src="<a href="http://imgur.com/HZReyAQ.png" rel="nofollow">http://imgur.com/HZReyAQ.png</a>" alt="Advanced: Cataclysm">
</div>
<input type="radio" class="tab tab1 mainTabCorrection" name="attr_page-tab" value="1" title="Main Page" checked="checked"/ >
<span class="sheet-tab sheet-tab1 vertical mainTab" >M A I N</span>
<input type="radio" class="tab tab2 infoTabCorrection" name="attr_page-tab" value="2" title="Static Info" />
<span class="sheet-tab sheet-tab2 vertical infoTab">I N F O</span>
<div class="sheet-section-main">
Page 1 stuff </div>
<div class="sheet-section-info>
Page 2 stuff
</div> /* Tabs */
input.sheet-tab1:not(:checked) ~ div.sheet-section-main,
input.sheet-tab2:not(:checked) ~ div.sheet-section-info {
display:none;
}
/*this shows the tab content when the appropriate input field is selected*/
input.sheet-tab1:checked ~ div.sheet-section-main,
input.sheet-tab2:checked ~ div.sheet-section-info {
display: block;
}
/*this hides the radio button for each tab and makes sure it's above everything else*/
input.sheet-tab {
-ms-transform: scale(8);
-webkit-transform: scale(8);
transform: scale(8);
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #5E7388;
color: #85D6FF;
font-weight: bold;
border-radius: 4px;
border:1px;
border-color: black;
width: 10px;
height: 80px;
cursor: pointer;
position: relative;
vertical-align: middle;
}
/* this modifies the span color once the radio button is selected so you know which tab is selected */
input.sheet-tab1:checked + span.sheet-tab1,
input.sheet-tab2:checked + span.sheet-tab2 {
background: #091623;
color:#85D6FF;
border-radius: 4px;
border:10px;
border-color:#85D6FF;
}
