Only one tab doesn't work

This will be my 3rd or 4th "I think I've done something dumb that should be obvious" post, but here goes anyway :)  : My custom sheet has been set up for a while with 2 tabs (Character and Vehicle) using the radio-button method I've seen on this forum a lot.  I'm getting close to where I want to start a game with it and invite some players in to test it, so today I decided "I'll do something easy and add a 'Notes' tab as the first tab so I can put in status updates, known problems, etc. for testers to be aware of. The good news is that the original 2 tabs still display their contents just fine... but the new one comes up blank. HTML: < input   type = "radio"   name = "attr_tab"   class = "tab notes-tab"   value = "1"   checked   />   < span   class = "tab" > Notes </ span > < input   type = "radio"   name = "attr_tab"   class = "tab char-tab"   value = "2"   />   < span   class = "tab" > Character </ span > < input   type = "radio"   name = "attr_tab"   class = "tab veh-tab"   value = "3"   />   < span   class = "tab" > Vehicle </ span > < div   class = "tab-content notes-tab" >     Notes        Lorem ipsum etc </ div > < div   class = "tab-content char-tab" > ... etc Sheet worker:     const buttonlist = ["notes","character","vehicle"];     buttonlist.forEach(button => {         on(`clicked:${button}`, function() {             setAttrs({                 sheetTab: button             });         });     }); CSS: div.sheet-tab-content  {    display :  none ; } input.sheet-char-tab:checked  ~  div.sheet-char-tab , input.sheet-veh-tab:checked  ~  div.sheet-veh-tab , input.sheet-notes-tab.checked  ~  div.sheet-notes-tab  {    display :  block ; } .charsheet   input.sheet-tab  {    width :  80px ;    position :  relative ;    opacity :  0 ;    z-index :  9999 ; } .charsheet   span.sheet-tab  {    /* width and margin-left must be equal the width in sheet-tab above */    width :  80px ;     margin-left :  -80px ;    text-align :  center ;      display :  inline-block ;      border-radius :  4px ;    border :  1px   solid ;    background-color :  #ede695 ; } input.sheet-tab [ type = "radio" ] :checked  +  span.sheet-tab  {    font-weight :  bold ; } Any ideas?

You have somehow combined the radio button method with the button method. The sheetworker is from the button version. Look at the CSS Wizardry wiki page again and decide to use either method, but not both. The problem is likely in the combo.

Looks like the sheet worker was a vestige of my first attempts at tabs and wasn't actually doing anything.  Took it out and the behavior is the same.

What is in this div: < div   class = "tab-content veh-tab" >

Rabulias said: What is in this div: < div   class = "tab-content veh-tab" > Just some blank fields and some layout that will be replaced.  The vehicle tab displays fine, it's the notes one that doesn't. < div   class = "tab-content veh-tab" >      < div   class = "section-details" >          < div   class = "table" >              < div   class = "table-row" >                  < span   class = "table-data" > NAME:  < input   type = "text"   name = "attr_vehicle_name"   title = "vehicle_name"   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > MODEL:  < input   type = "text"   name = "attr_vehicle_model"   title = "vehicle_model"   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > OPERATOR:  < input   type = "text"   name = "attr_vehicle_operator"   title = "vehicle_operator"   /></ span >              </ div >          </ div >      </ div >      < div   class = "section-details" >          < div   class = "table" >              < div   class = "table-row" >                  < span   class = "table-data" > SYSTEM SPACES:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_spaces"   title = "vehicle_spaces"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > PROFILE:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_profile"   title = "vehicle_profile"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > WEIGHT:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_weight"   title = "vehicle_weight"   disabled   />  lbs </ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > MASS:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_mass"   title = "vehicle_mass"   disabled   /></ span >              </ div >          </ div >      </ div >      < div   class = "section-details" >          < div   class = "table" >              < div   class = "table-row" >                  < span   class = "table-data" > ARMOR: </ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > Kinetic:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_kinetic_armor"   title = "vehicle_kinetic_armor"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > Energy:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_energy_armor"   title = "vehicle_energy_armor"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > Biochem:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_bio_armor"   title = "vehicle_bio_armor"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > Entropy:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_entropy_armor"   title = "vehicle_entropy_armor"   disabled   /></ span >                  < span   class = "table-data" >   </ span >                  < span   class = "table-data" > Psychic:  < input   class = "sheet-number-text"   type = "text"   name = "attr_vehicle_psychic_armor"   title = "vehicle_psychic_armor"   disabled   /></ span >              </ div >          </ div >      </ div >      </ div >

The notes class needs to be ":checked" input.sheet-char-tab:checked ~ div.sheet-char-tab, input.sheet-veh-tab:checked ~ div.sheet-veh-tab, input.sheet-notes-tab.checked ~ div.sheet-notes-tab {   display: block; } try changing it to: input.sheet-char-tab:checked ~ div.sheet-char-tab, input.sheet-veh-tab:checked ~ div.sheet-veh-tab, input.sheet-notes-tab:checked ~ div.sheet-notes-tab { display: block; }

Aha!  Yep, I guarantee that's the problem :p

Been there.  Done that. Like a thousand times.  ;-P