When i copy the sheet-tab inside <div class="sheet-sectiontab-configroll"> it will not working. How can i Improve it? html <div>
<!-- Set up the Tabs -->
<input type="radio" class="sheet-tab sheet-tab1" name="attr_core-tab" value="1" title="Charactersheet" checked="checked"/>
<span class="sheet-tab sheet-tab1" style='line-height: 40px;' >Character sheet</span>
<input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Skills" />
<span class="sheet-tab sheet-tab2" style='line-height: 40px;'>Skills</span>
........
Tab 3-8
........
<p/>
<!-- End Tab setup -->
<div class="sheet-sectiontab-configroll"><!-- config Tab -->
<div class='sheet-colrow'>
<h4 class="section-head">
........
<input type="radio" class="sheet-tab sheet-tab2" name="attr_core-tab" value="2" title="Skills" />
<span class="sheet-tab sheet-tab2" style='line-height: 40px;'>Skills</span> <-----------not working
</h4>
</div>
</div>
</div> CSS /*----------- Tabs Setup -------------*/
/*this hides the contents of each tab by default*/
.charsheet div[class^="sheet-sectiontab"] {
display: none;
}
/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-core,
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-skills,
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-weapon,
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-backstory,
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-otherstory,
.charsheet input.sheet-tab1:checked ~ div.sheet-sectiontab-notes {
display: block;
}
.charsheet input.sheet-tab8:checked ~ div.sheet-sectiontab-configroll {
display: block;
}
/*this shows the tab content when the appropriate input field is selected*/
.charsheet input.sheet-tab2:checked ~ div.sheet-sectiontab-skills,
.charsheet input.sheet-tab3:checked ~ div.sheet-sectiontab-weapon,
.charsheet input.sheet-tab4:checked ~ div.sheet-sectiontab-backstory,
.charsheet input.sheet-tab5:checked ~ div.sheet-sectiontab-otherstory,
.charsheet input.sheet-tab6:checked ~ div.sheet-sectiontab-notes,
.charsheet input.sheet-tab7:checked ~ div.sheet-sectiontab-config,
.charsheet input.sheet-tab7:checked ~ div.sheet-sectiontab-configroll {
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-sectiontab"] {
display: block;
}
/*this hides the radio button for each tab, makes it 100px wide and 40px tall and makes sure it's above everything else*/
.charsheet input.sheet-tab {
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
.charsheet input.sheet {
}
/*this styles the span with the tab information and slides to the left, so it appears underneath the radio button*/
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 13px;
background: #c7c3b0;
color: black;
font-weight: bold;
border-radius: 4px;
width: 100px;
height: 40px;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-left: -101px;/*originally 91px*/
}
/*this modifies the span color once the radio button is selected so you know which tab is selected*/
.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab6:checked + span.sheet-tab6,
.charsheet input.sheet-tab7:checked + span.sheet-tab7,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 {
background: #2c424e;
color: #bfc4c6;
border-radius: 4px;
}
/*----------- End Tab Setup -----------*/
