How to Reveal and Hide a Div using a Checkbox in a Form

I have created a form and I what a text box to be revealed if the Other box is checked.
I provided the code in CSS based on the pseudo class :checked, but nothing happens when the Other box is checked. Here is the code:
`

Event
         <input id="business" type="checkbox" name="session" value="business"/>
         <label for="business">Business</label><br>

         <input id="outdoor" type="checkbox" name="session" value="outdoor"/>
         <label for="outdoor">Outdoors</label><br>

         <input id="other" type="checkbox" name="session" value="other"/>
         <label for="Other">Other</label><br>
         </div>
          <div class="other-box">
          <label for="other-details">Other: please describe</label>
          <textarea id="other-details"></textarea>
         </div>      

The CSS I added to support it
.other-box {
display: none;
}

#other:checked ~ .other-box {
display: block;
}
`

The value above is capitalized which does make a difference.

Not sure the two elements are general siblings. Will need to dig into that.


Found this…

… both share the same parent
CSS selectors - CSS: Cascading Style Sheets | MDN

Thank you. It worked.

1 Like