ok, step two... can this be done inside a table.. inside a fieldset..? **Fair Warning: The CSS is just a snippet, and even that is atrocious... HTML: <div class="sheet-tab-content sheet-section-strength-skills">
<br>
<br>
<div class="sheet-repeating-fields">
<fieldset class="repeating_strength">
<table style="border-collapse: collapse; border-spacing: 0;">
<tr>
<td><h4><span class="sheet-counter-skills"></span></h4></td>
<td><input type="radio" name="attr_tab4" class="sheet-tab sheet-line sheet-skill-line sheet-tab19" title="Click here to change this line to a Modifier." value="1" checked><span class="sheet-tab sheet-line sheet-skill-line sheet-tab19">Skill</span><input type="radio" name="attr_tab4" class="sheet-tab sheet-line sheet-mod-line sheet-tab20" title="Click to here to change this line to a Skill." value="2"><span class="sheet-tab sheet-line sheet-mod-line sheet-tab20">Modifier</span></td>
<td><div class="sheet-tab-content sheet-section-skill-line">
<td><input style="display: none;" type="text" name="attr_strength_die_holder" value="0"><input type="text" name="attr_strength_skill" title="@{repeating_strength_$X_strength_skill}" class="sheet-display" placeholder="Skill Name"></td>
<td><input style="display: none;" type="text" name="attr_recent_difficulty1" value="0"><input type="text" name="attr_strength_skill_score" title="@{repeating_strength_$X_strength_skill_score}" class="sheet-short" value="0" readonly="true">
<button type="roll" name="roll_strength_skill" title="%{repeating_strength_$X_strength_skill}" value="&{template:default} {{name=Success Check for @{strength_skill}}} {{Degree=[[1d20+@{strength_skill_score}+?{Use Confidence score? You have @{metric1}/@{confidence_score} available.|0}]] ≥ [[?{Difficulty?|0}]]}}"></button></td>
<td><input type="text" name="attr_strength_skill_exp" title="@{repeating_strength_$X_strength_skill_exp}" class="sheet-skills" value="0" readonly="true"></td>
<td><input type="text" name="attr_strength_skill_exp_next" title="@{repeating_strength_$X_strength_skill_exp_next}" class="sheet-skills" value="100" readonly="true"></td></td>
</div>
<td><div class="sheet-tab-content sheet-section-mod-line">
<td><input type="text" name="attr_strength_modifier" title="@{repeating_strength_$X_strength_modifier}" class="sheet-display" placeholder="Modifier Name"></td>
<td><input type="text" name="attr_strength_mod_focus" title="@{repeating_strength_$X_strength_mod_focus}" class="sheet-short" value="1.0"></td>
<td><input type="text" name="attr_strength_mod_slack" title="@{repeating_strength_$X_strength_mod_slack}" class="sheet-short" value="1.0"></td>
<td><input type="text" name="attr_strength_mod_target" title="@{repeating_strength_$X_strength_mod_target}" class="sheet-display" placeholder="@{}"></td></td>
</div>
</tr>
</table>
</fieldset>
</div>
</div> CSS: input.sheet-line {
position: absolute;
z-index: 1;
}
span.sheet-line {
display: none;
}
input.sheet-skill-line {
z-index: 2;
}
input.sheet-skill-line:checked + input.sheet-mod-line {
z-index: 3;
}
input.sheet-skill-line:checked ~ span.sheet-skill-line,
input.sheet-mod-line:checked ~ span.sheet-mod-line {
display: inline-block;
}
input.sheet-tab:not(:first-child)::before {
border-left: none;
}
.sheet-repeating-fields {
counter-reset: sheet-rep-items -1;
}
span.sheet-counter-skills::before {
counter-increment: sheet-rep-items;
content: ' Line ' counter(sheet-rep-items) '.';
}
span.sheet-counter::before {
counter-increment: sheet-rep-items;
content: counter(sheet-rep-items) '.';
}
input[type="radio"] + span::before {
margin-right: 4px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
div[class^="sheet-section"] {
display: block;
}
.charsheet input.sheet-tab10:checked ~ div.sheet-section-strength-skills,
.charsheet input.sheet-tab19:checked ~ div.sheet-section-skill-line,
.charsheet input.sheet-tab20:checked ~ div.sheet-section-mod-line {
display: block;
}
.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] {
display: block;
}
.charsheet input.sheet-tab {
width: 120px;
height: inherit;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
.charsheet span.sheet-tab {
text-align: center;
display: inline-block;
font-size: 14px;
background: #800a0a;
color: white;
font-weight: bold;
border-radius: 4px;
width: 120px;
height: inherit;
cursor: pointer;
position: relative;
}
.charsheet div.sheet-tab-content { display: none; }
.charsheet input.sheet-tab10:checked + span.sheet-tab10,
.charsheet input.sheet-tab19:checked + span.sheet-tab19,
.charsheet input.sheet-tab20:checked + span.sheet-tab20 {
display: inline-table;
background: #ab8b57;
color: white;
border-radius: 4px;
}
input[type="radio"] {
opacity: 0;
width: 120;
height: 30px;
position: absolute;
cursor: pointer;
z-index: 1;
}
input.sheet-tab + span::before {
margin-right: 4px;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
