Problems with hidden forms not re-hiding themselves - php

Question

So I'm using CSS to reveal different text boxes based on what radio button gets clicked. It is working mostly, but I'll list the issues at the bottom below my code.
CSS:
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.reveal-if-active label {
display: block;
margin: 0 0 3px 0;
}
.reveal-if-active input[type=text] {
width: 50%;
}
input[type="radio"]:checked ~ .reveal-if-active, input[type="checkbox"]:checked ~ .reveal-if-active {
opacity: 1;
max-height: 100px;
padding: 10px 20px;
-webkit-transform: scale(1);
transform: scale(1);
overflow: visible;
}
Form:
<h1>What group does this person belong to?</h1>
<br />
<form action="uploaderPerson.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $_GET["id"]; ?>"/>
<input type="hidden" name="action" value="2"/>
<input type="radio" name="option" value="Employer" id="Employer"> Employer<br>
<div class="reveal-if-active">
<label for="empname">Employer's Name: </label>
<input type="text" id="empname" name="empname" class="require-if-active" data-require-pair="#Employer" placeholder="empname">
<label for="email">Employer's Email: </label>
<input type="text" id="email" name="email" class="require-if-active" data-require-pair="#Employer" placeholder="email">
<label for="phone">Employer's Phone: </label>
<input type="text" id="phone" name="phone" class="require-if-active" data-require-pair="#Employer" placeholder="phone">
</div>
<br />
<input type="radio" name="option" value="Faculty"> Faculty<br>
<div class="reveal-if-active">
<label for="hiredate">Hire Date: </label>
<input type="text" id="hiredate" name="hiredate" class="require-if-active" data-require-pair="#Faculty" placeholder="hiredate">
<label for="isretired">Retired?: </label>
<input type="text" id="isretired" name="isretired" class="require-if-active" data-require-pair="#Faculty" placeholder="isretired">
<label for="degreeinstitute">Degree Institute: </label>
<input type="text" id="degreeinstitute" name="degreeinstitute" class="require-if-active" data-require-pair="#Faculty" placeholder="degreeinstitute">
</div>
<br />
<input type="radio" name="option" value="Student"> Student<br>
<div class="reveal-if-active">
<label for="graduation">Hire Date: </label>
<input type="date" id="graduation" name="graduation" class="require-if-active" data-require-pair="#Student" placeholder="mm/dd/yyyy">
</div>
<br /><br />
<input type="submit" value="Submit">
</form>
My problem is when I click one radio button they all appear. I then click the Faculty button and Employer one goes away but the Student one stays active. Then I click the student one and the Faculty one finally disappears. Its not a huge deal, but I can't figure out what I'm missing. I'd imagine its something simple, but I can't seem to find it anywhere. I know several people use javascript to help with this kind of thing, but I wasn't having much luck using it and got this to work mostly. Any input is appreciated.

Answer 1

You are using the wrong CSS selector.
There is a way to do this with pure CSS as long as you strictly abide by some rules:
a) You need to use the + selector in order to select a direct sibling.
b) You need to be sure that your .reveal-if-active is a direct sibling to your checkbox which controls it.
CSS is not meant to do these tasks and I strongly advise against using CSS to achieve these results since it heavily relies on details in the DOM document which you may need to alter to achieve other styling requirements. However if it needs to be pure CSS you can do the following:
CSS
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
font-size: 16px;
-webkit-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.reveal-if-active label {
display: block;
margin: 0 0 3px 0;
}
.reveal-if-active input[type=text] {
width: 50%;
}
input[type="radio"]:checked + .reveal-if-active, input[type="checkbox"]:checked + .reveal-if-active {
opacity: 1;
max-height: 100px;
padding: 10px 20px;
-webkit-transform: scale(1);
transform: scale(1);
overflow: visible;
}
HTML
<form action="uploaderPerson.php" method="POST" enctype="multipart/form-data">
<input type="hidden" name="id" value="id"/>
<input type="hidden" name="action" value="2"/>
<input type="radio" name="option" value="Employer" id="Employer"> Employer
<div class="reveal-if-active">
<label for="empname">Employer's Name: </label>
<input type="text" id="empname" name="empname" class="require-if-active" data-require-pair="#Employer" placeholder="empname">
<label for="email">Employer's Email: </label>
<input type="text" id="email" name="email" class="require-if-active" data-require-pair="#Employer" placeholder="email">
<label for="phone">Employer's Phone: </label>
<input type="text" id="phone" name="phone" class="require-if-active" data-require-pair="#Employer" placeholder="phone">
</div>
<br />
<input type="radio" name="option" value="Faculty"> Faculty
<div class="reveal-if-active">
<label for="hiredate">Hire Date: </label>
<input type="text" id="hiredate" name="hiredate" class="require-if-active" data-require-pair="#Faculty" placeholder="hiredate">
<label for="isretired">Retired?: </label>
<input type="text" id="isretired" name="isretired" class="require-if-active" data-require-pair="#Faculty" placeholder="isretired">
<label for="degreeinstitute">Degree Institute: </label>
<input type="text" id="degreeinstitute" name="degreeinstitute" class="require-if-active" data-require-pair="#Faculty" placeholder="degreeinstitute">
</div>
<br />
<input type="radio" name="option" value="Student"> Student
<div class="reveal-if-active">
<label for="graduation">Hire Date: </label>
<input type="date" id="graduation" name="graduation" class="require-if-active" data-require-pair="#Student" placeholder="mm/dd/yyyy">
</div>
<br /><br />
<input type="submit" value="Submit">
</form>
Example jsFiddle

Answer 2

You are going to want this example I think. It shows how to use javascript to hide and show your checkboxes, you just may need a few more ifs in there
EDIT: To use it, you are going to want to give your checkboxes ids that javascript/JQuery can grab