A bit of help with show/hide CSS please

Hey guys, I'm drawing a mental blank. I know I can do this, but every attempt is failing at the moment. This works as intended:                         <div class="skillrow">                             <details>                                 <summary><span class="assassinlabel">Shock Attack</span></summary>                                 <input type="checkbox" class="assassincheckbox shockattack" name="attr_shockattack" value="1" />                                 <div class="assassinroll shockattack">                                     <button class="roll d6" type="roll" value="&{template:default} {{name=@{character_name} delivers a Shock Attack!}} {{Dice Roll= [[1d6]]}} {{Result= 1 Stunned Opponent’s attack, defence and evasion are all at 0.                                     2 Aghast Opponent’s attack and evasion are at 0; defence is half normal.                                      3-4 Astonished Opponent’s attack is at 0; evasion and defence at half normal.                                      5-6 Surprised Opponent’s attack is at 0; evasion and defence are unimpaired}}" ></button>                                 </div>                                 <textarea class="assassinskilltext" readonly> An Assassin who successfully moves within 3 metres of an enemy without being noticed is then able to make a shock attack. The effect of this is automatic surprise (see p. 61). Additionally, if the Assassin’s rank is higher than that of his surprised opponent, he rolls d6 and consults the Shock Attack Table:      Shock Attack Table      Roll Description Effect      1 Stunned Opponent’s attack, defence and evasion are all at 0      2 Aghast Opponent’s attack and evasion are at 0; defence is half normal      3-4 Astonished Opponent’s attack is at 0; evasion and defence at half normal      5-6 Surprised Opponent’s attack is at 0; evasion and defence are unimpaired Any special effect from the above table lasts for a round, after which the victim may act normally.                                 </textarea>                             </details>                         </div> input.assassincheckbox.shockattack:checked ~ .assassinroll.shockattack {   display: grid; } .assassinroll.shockattack  {   display: none; } Now I want to replicate the roll button and visibility conditions on another tab of the sheet. I've tried using a hidden input with the same details, ie:  <input type="hidden" class="assassincheckbox shockattack" name="attr_shockattack" value="1" />  But of course this doesn't store the checked value of the original checkbox. So I tried using the value in the CSS, instead of the checked status: input.assassincheckbox.shockattack:([value="1"]) ~ .assassinroll.shockattack {   display: grid; } .assassinroll.shockattack  {   display: none; } And that just breaks everything... Urgh! I've tried a dozen different versions of punctuation etc. I am sure I have successfully done this before, but can't for the life of me remember how.

I'm not an expert, but maybe this works: input[name=attr_shockattack][value=1]

Your original cehckbox does have a value so that will be stored with the attribute name: <input type="checkbox" class="assassincheckbox shockattack" name="attr_shockattack" value="1" /> The thing is, checkboxes work differently from other inputs. The value is stored when the checkbox is checked, otherwise it has a value of zero. The hidden input must have a class. It's value is stored, but CSS can't see values - it uses the hidden input's class . So this should work, if your input is in the correct place. input.[class of hidden input][value="1"] ~ .assassinroll.shockattack {   display: grid; } .assassinroll.shockattack  {   display: none; } Change [class of hidden input] (including the square brackets) to whatever class you have given that hidden input. The use of two classes there is confusing me, I don't know why you would need to do that, and the code would be simpler - and maybe more reliable - if you don't. However, I do see a problem with your hidden input. That value=1. You have this checkbox: <input type="checkbox" class="assassincheckbox shockattack" name="attr_shockattack" value="1" /> Remember, the checkbox starts out unchecked, so its value is 0. It only gets a value of 1 when checked. So its default value is 0. Your hidden input (which is not a checkbox) should match this value. It should be <input type="hidden" class="assassincheckbox shockattack" name="attr_shockattack" value="0" /> Try that, see if it works, and if not, show your HTML and CSS for section in the other tab.

Awww, GiG's - you da man! It was that pesky value='1', seriously about the only thing I didn't change in my attempts... I've already got you in my page documentation thanks. Now I'm putting you in bold . The two classess thing... well that's what happens when you are just hacking about without too much of a clue and make a million changes.

Steve said: It was that pesky value='1', seriously about the only thing I didn't change in my attempts... I only spotted that because I've done it myself, too many times to mention :) When you are setting default values, you have to make sure you are always setting the same default value across all instances of that attribute. The error doesn't just happen with checkboxes, but that's the easiest place for it to happen.

Oh no. I thought I'd eliminate the additional classes, but I've just ended up breaking it again. Here's the HTML on the front tab (intended as 'quick reference' to the buttons for skills the character has. Assassin Profession Abilities             <div class="skillrow">                 <details>                     <summary>Shock Attack</summary>         <input type="hidden" class="shockattack_toggle" name="attr_shockattack" value="0" />                         <div class="shockattack_button">                             Roll Shock Attack result:<button class="roll d6" type="roll" value="&{template:default} {{name=@{character_name} delivers a Shock Attack!}} {{Dice Roll= [[1d6]]}} {{Result= 1 Stunned Opponent’s attack, defence and evasion are all at 0.                             2 Aghast Opponent’s attack and evasion are at 0; defence is half normal.                              3-4 Astonished Opponent’s attack is at 0; evasion and defence at half normal.                              5-6 Surprised Opponent’s attack is at 0; evasion and defence are unimpaired}}" ></button>                         </div>      </details> </div> Here's the code on the Skills selection page:                         <div class="skillrow">                             <details>                                 <summary>Shock Attack</summary>                                 <input type="checkbox" class="shockattack_toggle" name="attr_shockattack" value="1" />                                 <div class="shockattack_button">                                     <button class="roll d6" type="roll" value="&{template:default} {{name=@{character_name} delivers a Shock Attack!}} {{Dice Roll= [[1d6]]}} {{Result= 1 Stunned Opponent’s attack, defence and evasion are all at 0.                                     2 Aghast Opponent’s attack and evasion are at 0; defence is half normal.                                      3-4 Astonished Opponent’s attack is at 0; evasion and defence at half normal.                                      5-6 Surprised Opponent’s attack is at 0; evasion and defence are unimpaired}}" ></button>                                 </div>                                 <textarea class="assassinskilltext" readonly> An Assassin who successfully moves within 3 metres of an enemy without being noticed is then able to make a shock attack. The effect of this is automatic surprise (see p. 61). Additionally, if the Assassin’s rank is higher than that of his surprised opponent, he rolls d6 and consults the Shock Attack Table:      Shock Attack Table      Roll Description Effect      1 Stunned Opponent’s attack, defence and evasion are all at 0      2 Aghast Opponent’s attack and evasion are at 0; defence is half normal      3-4 Astonished Opponent’s attack is at 0; evasion and defence at half normal      5-6 Surprised Opponent’s attack is at 0; evasion and defence are unimpaired Any special effect from the above table lasts for a round, after which the victim may act normally.                                 </textarea>                             </details>                         </div> input.shockattack_toggle[value="1"] ~ .shockattack_button {   display: grid; }   .shockattack_button { display: none; } Now the buttons are not hidden.

You dont have to get rid of the multiple classes in the HTML, you just don't need to use them in the CSS. There might be more going on - if changing classes has broken things, it means there is likely some extra CSS using one or the other that you haven't accounted for. I would restore them in both HTML and CSS, see if everytthing is working, then just remove one from the CSS and leave the HTML alone. I might suggest more, but It's hard to diagnose class problems without seeing the full sheet (HTML and CSS) and I don't have the time to look at that.

By the way, if no other CSS is interfering, my guess for this: input.shockattack_toggle[value="1"] ~ .shockattack_button {   display: grid; }   .shockattack_button { display: none; } is specificity . Try changing them to .charsheet input.shockattack_toggle[value="1"] ~ .shockattack_button {   display: grid; } .charsheet  .shockattack_button { display: none; } and see if they start working again. If they worked before and don't work now, and the oly difference is the previous version had 2 classes and the new one has one, specicifity is the obvious culprit. It suggests you have some CSS assigning a class to divs in the area of the character sheet that makes them visible and the previous code had enough specificity to override it and the new code doesn't. If that doesn't fix it, then the issue must be in another part of the sheet we can't see - and with CSS, that can be the case extremely easily.

Thanks again GiGs. I returned the section to use two classes again, and it fixed it right back up - I have used a lot of hidden/shown areas on the sheet, often nested hidden areas inside hidden areas. So that code for example is a roll button which is hidden  and is wrapped inside a details/summary , inside a skills section which is hidden, which is on a sheet tab. I must admit that I had been using .ui-dialog & .charsheet until I rewrote parts of the code and forgot to reinclude them. I should have tried that from the start...