How can I animate a div to appear and disappear using a radio check?

Question

So I was making an online form and I added two radio buttons and I wanted a div to appear when I click the second radio button and make the div disappear when the first radio button is clicked. I did that successfully but I can't seem to figure out how to animate it so it looks more pleasing.

Here's the html code:

                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    <div class="form-group" id="newStud" style="display: none;">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
                            </div>
                            <div class="col-md-6">
                                <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
                            </div>
                        </div>
                    </div>

Here's my js:

var radio_h = document.getElementById("customRadio1");
                        var radio = document.getElementById("customRadio2");

                        radio.onchange = function() {
                          if (radio.checked === true) {
                            document.getElementById("newStud").style.display = "block";
                          }
                        }

                        radio_h.onchange = function() {
                            if (radio_h.checked === true) {
                                document.getElementById("newStud").style.display = "none";
                            }
                        }

score 0 · Answer 1 · answered Apr 13 '20 at 08:28

Animation can not be added to elements with display none, thus you need to use visibility & opacity style to get a smooth animation like:

var radio_h = document.getElementById("customRadio1");
var radio = document.getElementById("customRadio2");

radio.onchange = function() {
  if (radio.checked === true) {
    document.getElementById("newStud").classList.add('show')
  }
}

radio_h.onchange = function() {
  if (radio_h.checked === true) {
    document.getElementById("newStud").classList.remove('show')
  }
}

#newStud {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.5s, opacity 0.5s linear;
}

#newStud.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0.4s;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="form-group">
  <div class="form-row">
    <div class="col-md-2"></div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
        <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
      </div>
    </div>
    <div class="col-md-4">
      <div class="custom-control custom-radio">
        <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
        <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
      </div>
    </div>
    <div class="col-md-2"></div>
  </div>
</div>
<div class="form-group" id="newStud">
  <div class="form-row">
    <div class="col-md-6">
      <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
    </div>
    <div class="col-md-6">
      <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
      <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
    </div>
  </div>
</div>

mr. pc_coder · Answer 2 · 2020-04-13T08:54:24.480

I suggest u to use animated.css for this. Usage of is only that inculede css to your project and write animation type in class . U can use lots of animation types https://daneden.github.io/animate.css/

var radio_h = document.getElementById("customRadio1");
                        var radio = document.getElementById("customRadio2");

                        radio.onchange = function() {
                          if (radio.checked === true) {
                            document.getElementById("newStud").style.display = "block";
                          }
                        }

                        radio_h.onchange = function() {
                            if (radio_h.checked === true) {
                                document.getElementById("newStud").style.display = "none";
                            }
                        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>

 <div class="form-group animated slideInDown">
                        <div class="form-row">
                            <div class="col-md-2"></div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">
                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="custom-control custom-radio">
                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>
                    <div class="form-group animated slideInLeft" id="newStud" style="display: none;">
                        <div class="form-row">
                            <div class="col-md-6">
                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">
                            </div>
                            <div class="col-md-6">
                                <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>
                                <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">
                            </div>
                        </div>
                    </div>

score 0 · Answer 3 · answered Apr 13 '20 at 08:48

You can do easily with jQuery, but I have added code using both jQuery/VanilaJS. Please see the answer here.
Using jQuery

/* -- USING JQUERY -- */
$('input[type=radio][name=studOldNew]').on('change', function() {
    console.log('change:: ', $(this).val())
  switch ($(this).val()) {
    case 'old':
      $('#newStud').fadeOut();
      break;
    case 'new':
      $('#newStud').fadeIn();
      break;
  }
});

Using VanilaJS

/* -- USING VANILA JS*/
var radios = document.querySelectorAll("input[type=radio][name=studOldNew]");
radios.forEach(r => {
    r.addEventListener("change", function(e) {
      var target = e.target;
    switch (target.value) {
      case 'old':
        document.getElementById('newStud').style.opacity = 0;
        setTimeout(() => {
            document.getElementById('newStud').style.visibility = 'hidden';
        }, 1000)
        break;
      case 'new':
        document.getElementById('newStud').style.visibility = 'visible';
        document.getElementById('newStud').style.opacity = 1;
        break;
    }
  });
})

How can I animate a div to appear and disappear using a radio check?

3 Answers3