<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <label class="btn btn-info"> <input type="radio" class="form-switch radio_1set" name="colorCheckbox" value="Latifa Towers Branch" gl1="1" data-id="a"> Latifa Towers Branch </label> <label class="btn btn-info"> <input type="radio" class="form-switch radio_1set" name="colorCheckbox" value="Al Barsha Branch" gl1="2" data-id="b"> Al Barsha Branch</label> <label class="btn btn-info"> <input type="radio" class="form-switch radio_1set" name="colorCheckbox" value="Vision Tower Branch" gl1="3" data-id="c"> Vision Tower Branch</label> </div> <div class="col-md-12"> <label class="btn btn-info"> <input type="radio" class="form-switch radio_2set" name="colorCheckboxc" value="Private Suite" gl2="1" data-id="a"> Private Suite</label> <label class="btn btn-info"> <input type="radio" class="form-switch radio_2set" name="colorCheckboxc" value="Work Station" gl2="2" data-id="b"> Work Station</label> </div> <div class="col-md-12"> <div class="form form-a"> form a </div> <div class="form form-b"> form b </div> <div class="form form-c"> form c</div> <div class="form form-d"> form d</div> <div class="form form-e"> form e</div> <div class="form form-f"> form f</div> </div> <script> $(document).ready(function() { $('.form-switch').on('change', function() { $(".form").removeClass('active'); var opt_1 = $(".radio_1set:checked").attr('gl1'); var opt_2 = $(".radio_2set:checked").attr('gl2'); if ((opt_1 == 1) && (opt_2 == 2)) { $(".form-a").addClass('active'); } else if ((opt_1 == 2) && (opt_2 == 1)) { $(".form-b").addClass('active'); } else if ((opt_1 == 2) && (opt_2 == 2)) { $(".form-c").addClass('active'); } else if ((opt_1 == 3) && (opt_2 == 1)) { $(".form-d").addClass('active'); } else if ((opt_1 == 3) && (opt_2 == 2)) { $(".form-e").addClass('active'); } }); }); </script> </div> </div>

.form { display: none; } .form.active { display: block }