Problems with hidden forms not re-hiding themselves

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.

Just use [jQuery](http://jquery.com) for this, CSS is not meant for this kind of DOM manipulation. — yaakov, Apr 04 '16 at 15:09

score 1 · Accepted Answer · answered Apr 04 '16 at 15:22

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

Yea, the day after posting this I went back through and re-read that part of the CSS manual and realized I had misread it. However, in addition to changing it to +, I also had to put the text ("Student" for example) before the radio button declaration. All works well now. Thanks for the input! — TheFatness, Apr 06 '16 at 18:05

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

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

edited May 23 '17 at 10:28

Community

1
1

answered Apr 04 '16 at 15:07

jumper

74
1
9

Problems with hidden forms not re-hiding themselves

2 Answers2