当单击外部/其他单选按钮时，Bootstrap 4 删除折叠

Question

The below example when I click others the collapse div will open. If I want to close the collapse panel I want to click the same radio button. But I want to close the input when I click outside and also when I select other radio button.

 $('body').click(function(){ $(".collapse").removeClass('hide'); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio3">Food & Beverages</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input"> <label class="custom-control-label" for="nonRadio">Others</label> </div> <div id="nonRadio" class="frm-tgl collapse mt-1"> <input type="text" id="" name="" class="form-control"> </div>

Answer 1

 $(document).ready(function() { $('.collapse').on('click', function() { $("#other-input").removeClass('hidden') }); });

 .hidden {display:none}.active-input{ }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio3">Food & Beverages</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input"> <label class="custom-control-label" for="nonRadio">Others</label> </div> <div id="nonRadio" class="frm-tgl collapse mt-1"> <input type="text" id="other-input" name="" class="hidden form-control"> </div>

Answer 2

Try this. Get the name attribute of the radio buttons, when the "Others" is clicked set the condition to show or hide the desired element when it is clicked

 $(function() { $('input[name="nonRadio"]').on('click', function() { if ($(this).val() == 'Others') { $('#textbox').show(); } else { $('#textbox').hide(); } }); });

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio3">Food & Beverages</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input" value="Others"> <label class="custom-control-label" for="nonRadio">Others</label> </div> <div class="frm-tgl collapse mt-1" id="textbox"> <input type="text" class="form-control"> </div>

Answer 3

 $(document).ready(function(){ $("#nonRadio").click(function(){ // show hide paragraph on button click $("#other-input").toggle("slow", function(){ // check paragraph once toggle effect is completed if($("#other-input").is(":hidden")){ $("#other-input").removeClass('hidden') } else{ $("#other-input").addClass('hidden') } }); }); });

 .hidden {display:none}.active-input{ }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio2" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio2">Household/Decoration Items</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio3" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio3">Food & Beverages</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio4" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio4">Beauty/Massage</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio5" name="nonRadio" class="custom-control-input shnlabel1"> <label class="custom-control-label" for="nonRadio5">Handphone & Accessories</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="nonRadio" name="nonRadio" data-toggle="collapse" data-target="#nonRadio" class="custom-control-input"> <label class="custom-control-label" for="nonRadio">Others</label> </div> <div id="nonRadio" class="frm-tgl collapse mt-1"> <input type="text" id="other-input" name="" class="hidden form-control"> </div>