So, I am looking into creating a sheet for the Palladium Heroes Unlimited game, but the more I look at it, the more I see it is going to take a ridiculous number of tabs to organize. A lot of the tabs won't be needed unless the character is a specific thing. So I figured I needed to figure out how to reveal and hide tabs. I am just playing with the code from the CSS Wizardry page so far. I created the extra tabs, added them to the sheet worker and they work fine. I added a class to the 2 new buttons I created to be able to hide and (hopefully) reveal them. They hide just fine, but I'm not getting them to reveal at all. I have a feeling I am overlooking something really simple... Here is my current code: <div>
<button type="action" name="act_character" >Character</button>
<button type="action" class="confspells" name="act_spells" >Spells</button>
<button type="action" class="confpsionics" name="act_psionics" >Psionics</button>
<button type="action" name="act_journal" >Journal</button>
<button type="action" name="act_configuration" >Configuration</button>
</div>
<input type='hidden' class='sheet-tabstoggle' name='attr_sheetTab' value='character' />
<div class='sheet-character'>
<h2>Character</h2>
<span>character Stuff Goes here </span>
</div>
<div class="sheet-spells">
<h2>Spells</h2>
<span>Spell Stuff Goes Here</span>
</div>
<div class="sheet-psionics">
<h2>Psionics</h2>
<span>Psionic Stuff Goes Here</span>
</div>
<div class='sheet-journal'>
<h2>Journal/Notes</h2>
<span>Journal/Notes Stuff Goes here</span>
</div>
<div class='sheet-config'>
<h2>Config/Settings</h2>
<input type="checkbox" class="showspells" name="attr_showspells" value="1" checked="true" /><span>Show Spells Tab</span>
<input type="checkbox" class="showpsionics" name="attr_showpsionics" value="1" checked="true" /><span>Show Psionics Tab</span>
</div>
<script type="text/worker">
const buttonlist = ["character","spells","psionics","journal","configuration"];
buttonlist.forEach(button => {
on(`clicked:${button}`, function() {
setAttrs({
sheetTab: button
});
});
});
</script> /*Configure the tab buttons*/
.sheet-character,
.sheet-spells,
.sheet-psionics,
.sheet-config,
.sheet-journal {
display: none;
}
/* hide tab buttons */
.sheet-confspells,
.sheet-confpsionics {
display: none;
}
/* show the selected tab */
.sheet-tabstoggle[value="character"] ~ div.sheet-character,
.sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
.sheet-tabstoggle[value="psionics"] ~ div.sheet-psionics,
.sheet-tabstoggle[value="configuration"] ~ div.sheet-config,
.sheet-tabstoggle[value="journal"] ~ div.sheet-journal {
display: block;
}
/* reveal tab buttons */
input.showspells:[value="1"] ~ .sheet-confspells {
display: inline;
}
input.showspionics:[value="1"] ~ .sheet-confpsionics {
display: inline;
} If I comment out the part that hides those 2 buttons, they show and work properly, so it is only the revealing bit that is incorrect (I hope). What is my error?
