Show and hide div using radio button

How to Show and hide DIV using radio button based on selection with the help of jQuery. On click radio button show respective DIV and hide DIV click on another radio button.

The following example will show you how to show and hide DIV's based on radio button selection in jQuery.

Example 1:

Do you have passport?
Do you have driver license?
Enter PAN Details:
  • Html
  • JavaScript
  • Example
  <label for="chkYes">
    <input type="radio" id="chkYes" name="chkPinNo" /> Yes
  </label>
  <label for="chkNo">
    <input type="radio" id="chkNo" name="chkPinNo" /> No
  </label>
  -----------------------------
  <div class="driveingL">
    Do you have driver license?
    <label for="chkYes1">
      <input type="radio" id="chkYes1" name="chkPinNo1" /> Yes
    </label>
    <label for="chkNo1">
      <input type="radio" id="chkNo1" name="chkPinNo1" /> No
    </label>
  </div>
  -----------------------------
  <div class="panDeatils">
    Enter PAN Details
    <input type="text" placeholder="PAN No.">
  </div>
<script type="text/javascript">
  $(function() {
    $("input[name='chkPinNo']").click(function() {
      if ($("#chkNo").is(":checked")) {
        $(".driveingL").addClass("show-DIV");
      } else {
        $(".driveingL").removeClass("show-DIV");
      }
      });
      $("input[name='chkPinNo1']").click(function() {
        if ($("#chkNo1").is(":checked")) {
          $(".panDeatils").show();
        } else {
          $(".panDeatils").hide();
        }
        });
        $("input[name='chkPinNo']").click(function() {
          if ($("#chkYes").is(":checked")) {
            $(".driveingL").removeClass("show-DIV");
            $(".panDeatils").hide();;
          }
    });
  });
</script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>Hello, world!</title>
    <style>
    .driveingL, .panDeatils {
      display: none;
    }
    .show-DIV {
      display: block;
    }
    </style>
  </head>
  <body>
    <label for="chkYes">
      <input type="radio" id="chkYes" name="chkPinNo" /> Yes
    </label>
    <label for="chkNo">
      <input type="radio" id="chkNo" name="chkPinNo" /> No
    </label>

    <div class="driveingL">
      Do you have driver license?
      <label for="chkYes1">
        <input type="radio" id="chkYes1" name="chkPinNo1" /> Yes
      </label>
      <label for="chkNo1">
        <input type="radio" id="chkNo1" name="chkPinNo1" /> No
      </label>
    </div>

    <div class="panDeatils">
      Enter PAN Details
      <input type="text" placeholder="PAN No.">
    </div>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="jquery-3.3.1.slim.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script type="text/javascript">
      $(function() {
        $("input[name='chkPinNo']").click(function() {
          if ($("#chkNo").is(":checked")) {
            $(".driveingL").addClass("show-DIV");
          } else {
            $(".driveingL").removeClass("show-DIV");
          }
          });
          $("input[name='chkPinNo1']").click(function() {
            if ($("#chkNo1").is(":checked")) {
              $(".panDeatils").show();
            } else {
              $(".panDeatils").hide();
            }
            });
            $("input[name='chkPinNo']").click(function() {
              if ($("#chkYes").is(":checked")) {
                $(".driveingL").removeClass("show-DIV");
                $(".panDeatils").hide();;
              }
        });
      });
    </script>
  </body>
</html>

Example 2:

If yes then show this div and hide this div when click on No Option
<label for="chk-Yes">
  <input type="radio" id="chk-Yes" name="show-div" /> Yes
</label>
<label for="chk-No">
  <input type="radio" id="chk-No" name="show-div" /> No
</label>
-----------------------------
<div id="showDiv" style="display: none">
  If yes then show this div and hide this div when click on No Option
</div>

------------JavaScript-----------------------
<script type="text/javascript">
  $(function() {
    $("input[name='show-div']").click(function() {
      if ($("#chk-Yes").is(":checked")) {
        $("#showDiv").show();
      } else {
        $("#showDiv").hide();
      }
    });
  });
</script>

Example 3:

Another types of DIV hide/show example.

A DIV
On click A radio button show DIV A
B DIV
On click B radio button show DIV B
C DIV
On click C radio button show DIV C
D DIV
On click D radio button show DIV D
------------CSS-----------------------
.alfabetBox {
  display: none;
}
------------HTML-----------------------
<label><input type="radio" name="alfabet" value="A"> Option-A | </label>
<label><input type="radio" name="alfabet" value="B"> Option-B | </label>
<label><input type="radio" name="alfabet" value="C"> Option-C | </label>
<label><input type="radio" name="alfabet" value="D"> Option-D | </label>
<label><input type="radio" name="alfabet" value="none">None</label>
-----------------DIV's-----------------
<div class="A alfabetBox"><strong>A DIV</strong><br />On click A radio button show DIV A</div>
<div class="B alfabetBox"><strong>B DIV</strong><br />On click B radio button show DIV B</div>
<div class="C alfabetBox"><strong>C DIV</strong><br />On click C radio button show DIV C</div>
<div class="D alfabetBox"><strong>D DIV</strong><br />On click D radio button show DIV D</div>

------------JavaScript-----------------------
<script type="text/javascript">
  $(document).ready(function() {
      $('input[type="radio"]').click(function() {
          var inputValue = $(this).attr("value");
          var targetBox = $("." + inputValue);
          $(".alfabet").not(targetBox).hide();
          $(targetBox).show();
      });
    });
  });
</script>

Add and Remove class click on Radio Button

Above example show how to show and hide dive based on radio button click, in the example’s show's if yes then show div and if no then hide div, based on condition change the login and hide/show DIV based in selection. Using JavaScript add class and remove class also use to hide and show div. Using jQuery show() & hide() methods to show & hide the div elements based on the selection of radio buttons click. The DIV elements are hidden by default using the CSS display property none and on radio buttons click the DIV elements are visible.

You can customize this code further as per your requirement.