# Conditionally toggling visibility of form fields with Pure CSS(3)

I was looking for a pure CSS way to hide/show some form elements based on their value. Turns out it's pretty easy for checkboxes and radios. Basic example:

1. Check me
   1. Related subfield
2. Radio
   1. Related subfield

In the above example, I use the class .control to indicate which fields are the control and .conditional to indicate what will be displayed when the control is checked. I use sibling selectors ( `~` ) to tie the conditional to the control

You can get creative with IDs to show fields based on certain values only:

1. Citizen
2. Immigrant
   1. Country of Citizenship
   2. Type of Visa

You can even nest them.

1. Check me
   1. Related subfield
      1. Country of Citizenship
      2. Type of Visa

I haven't thought of a way to make this work with the `.conditional` in a different part of the form as it relies on an element being either a sibling or parent to be the control.