0

I'm having problems getting a checkbox to hide another div using CSS when that checkbox is selected. For example, I have two checkboxes

  • Checkbox 1
  • Checkbox 2

When checkbox 1 is selected, it's suppose to hide checkbox 2 but it doesn't. Any ideas on what I'm doing wrong?

Here's what I've done so far

#cover_photo_set_featured input:checked ~ #one_image_feature_image label {display:none}
<div id="cover_photo_set_featured">
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1
</div>
<div id="one_image_feature_image">
<label>
<input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
</label>
</div>
BOZ
  • 1,799
  • 6
  • 21
Gregory Schultz
  • 656
  • 6
  • 17

1 Answers1

1

You cannot choose a higher level in CSS.

For this, you must set the <input> and the <div> you want to hide to at least the same level.

So we will need to save the <div id="cover_photo_set_featured"> element from being the parent of .

But since I see that you are using ACF, I add the input right in front of it to be able to select it with CSS, so you can easily select the next <input> with the "+" selector.

We can now give "display: none" and "aria-hidden" attributes to <div>, which is used purely for help.

#cover_photo_set_featured {
  display: none;
}

#cover_photo_set_featured+input:checked~#one_image_feature_image label {
  display: none
}
<div id="cover_photo_set_featured" aria-hidden="true"></div>
<input type="checkbox" id="acf-block_601d8b4a91a27-field_5f8bec0fb8152-sfi" name="acf-block_601d8b4a91a27[field_5f8bec0fb8152][]" value="sfi">Checkbox 1

<div id="one_image_feature_image">
  <label>
     <input type="checkbox" id="acf-block_601d8b6591a28-field_5f8cf27e7bf5f-one_img_set_feat_img" name="acf-block_601d8b6591a28[field_5f8cf27e7bf5f][]" value="one_img_set_feat_img">Checkbox 2
  </label>
</div>
BOZ
  • 1,799
  • 6
  • 21