Zenko Zenko - 6 months ago 8
Javascript Question

How to disable Input hide on click

I've setup a form with bootstrap columns, collapse and fields, everything is working correctly but the input field. I want to be able to hide all non-selected input fields on click.

Is there a way to do this?

See JSFiddle

Also, I've tried using

$('.collapse').collapse("hide");
which does hide all the other non-selected fields but when trying to enter text the field hides.

See JSFiddle

HTML

<form>
<div class="row">

<div class="col-xs-4 pricing-wrap">
<label class="pricing text-center" data-toggle="collapse" data-target="#con-amount-wrap" aria-expanded="false" aria-controls="con-amount-wrap">
<div class="panel panel-default panel-pricing text-center">
<div class="panel-body">
<span class="min-ammount small">Minimum Deposit</span>
<h3 class="panel-amount">$2,500</h3>
</div>
</div>
</label>
<!-- Deposit Amount -->
<div class="collapse" id="con-amount-wrap">
<div class="top-buffer-sm">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="con_amount" id="con_amount" placeholder="Deposit Amount" />
</div>
</div>
</div>
</div>

<div class="col-xs-4 pricing-wrap">
<label class="pricing text-center" data-toggle="collapse" data-target="#mod-amount-wrap" aria-expanded="false" aria-controls="mod-amount-wrap">
<div class="panel panel-default panel-pricing text-center">
<div class="panel-body">
<span class="min-ammount small">Minimum Deposit</span>
<h3 class="panel-amount">$10,000</h3>
</div>
</div>
</label>
<!-- Deposit Amount -->
<div class="collapse" id="mod-amount-wrap">
<div class="top-buffer-sm">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="mod_amount" id="mod_amount" placeholder="Deposit Amount" />
</div>
</div>
</div>
</div>

<div class="col-xs-4 pricing-wrap">
<label class="pricing text-center" data-toggle="collapse" data-target="#adv-amount-wrap" aria-expanded="false" aria-controls="adv-amount-wrap">

<div class="panel panel-default panel-pricing text-center">
<div class="panel-body">
<span class="min-ammount small">Minimum Deposit</span>
<h3 class="panel-amount">$25,000</h3>
</div>
</div>
</label>
<!-- Deposit Amount -->
<div class="collapse" id="adv-amount-wrap">
<div class="top-buffer-sm">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="adv_amount" id="adv_amount" placeholder="Deposit Amount" />
</div>
</div>
</div>
</div>

</div>
</form>


JS

$(".pricing-wrap").click(function (e) {
$(this).addClass("selected").siblings().removeClass("selected");
$('.collapse').collapse("hide");
});

Answer

You need to filter out the currently selected .pricing-wrap

$(".pricing-wrap").click(function (e) {
  $(this).addClass("selected").siblings().removeClass("selected");
  $('.collapse').filter(function(){
     return !$(this).closest('.pricing-wrap').hasClass("selected");
  }).collapse("hide");
});

Fiddle https://jsfiddle.net/okkqw2we/4/

Comments