hide element when radio is checked css only

Question

The span elements in this picture are from the mdn docs on how to hide an element using css only. It works as expected. Clicking showMe/hideMe does whats expected.

How come when I try to do the same when my radio element is checked, nothing happens? Here is the relevant code:

   <!-- html -->
    <div>
      <input class="firstClass" type="radio" id="firstId">
      <label for="firstId">Yes</label>
    </div>
    <div class="expandable">
      <label for="secondId">Type of disability</label>
      <input type="text" id="secondId">
    </div>


    /* css */
    .expandable {
      display: none;
    }
    
    .firstClass:checked ~ .expandable {
      display: block;
    }

Many thanks.

score 0 · Accepted Answer · answered Sep 27 '20 at 10:23

0

 .expandable {
      display: block;
    }
    
    .firstClass:checked ~ .expandable {
      display: none;
    }

 <input class="firstClass" type="checkbox" id="firstId">
      <label for="firstId">Yes</label>
   
    <div class="expandable">
      <label for="secondId">Type of disability</label>
      <input type="text" id="secondId">
    </div>

answered Sep 27 '20 at 10:23

نور

1,023
2
12
23

Thanks for this answer but I wanted to use the radio element for my form – hulahoops Sep 27 '20 at 10:57
so change button type radio.... – نور Sep 27 '20 at 11:00
Aw yeah. Thanks so much! I really tried to google the answer. i gave you an upvote but someone else gave you a downvote so.. at least its not negative. – hulahoops Sep 27 '20 at 11:18

hide element when radio is checked css only

1 Answers1