CODEWITHSUNDEEP
javascriptjquery
Ahmed Elzelaky
Ahmed Elzelaky

Reputation: 21

jQuery: show Div when check first radio button

In the example below, I'm trying to show a specific div only when i check the radio button "yes".

It's ok for one div but when I try to do this for two separate panes, checking the second radio button also expands the first field.

How can I fold/unfold each container separately?

https://jsfiddle.net/vsf7mph8/3/

	$('.row .otherRowinput').hide();

	$('[type=radio]').on('change', function () {
		if($('.form-radio input:nth-child(1)').val() == $(this).val() ||$('.form-radio input:nth-child(2)').val() == $(this).val())
		$('.otherRowinput').toggle('fast');
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label> 
<div class="form-radio">
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="one" class="showOtherFiled" >
			<i class="helper"></i>yes
		</label>
	</div>
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="one">
			<i class="helper"></i>no
		</label>
	</div>
</div>
</div>
</div>

  <div class="col-md-12 otherRowinput">
 <div class="form-group">
	   <textarea id="my1" name="my1"  type="text" class="form-control">
	     
	   </textarea>
  </div>
  </div>
</div>



<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label> 
<div class="form-radio">
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="two" class="showOtherFiled" >
			<i class="helper"></i>yes
		</label>
	</div>
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="two">
			<i class="helper"></i>two
		</label>
	</div>
</div>
</div>
</div>

  <div class="col-md-12 otherRowinput">
 <div class="form-group">
	   <textarea id="my1" name="my1"  type="text" class="form-control" required></textarea>
  </div>
  </div>
</div>

Upvotes: 0

Views: 40

Answers (1)

akraf
akraf

Reputation: 3255

Your mistake is that $('.otherRowinput').toggle('fast'); applies to all text fields. However, you only want to apply it to the nearest text field.

For this, don't use the $(selector) function which applies to all objects in the DOM, but traverse the DOM starting from the checkbox that was modified. Starting from the currently checked box, traverse the DOM upwards until you find a common parent of the checkbox and the textarea, then traverse it downwards to the text area and toggle that.

You find the parent that includes both the checkbox and the text field with $(this).closest(selector). Then, starting from that parent object, select the text area that is a child of that element using find(selector). In total: 

$(this).closest(".row").find(".otherRowinput").toggle('fast');

Below is your updated example.

$('.row .otherRowinput').hide();

	$('[type=radio]').on('change', function () {
		if($('.form-radio input:nth-child(1)').val() == $(this).val() ||
       $('.form-radio input:nth-child(2)').val() == $(this).val()){
         $(this).closest(".row").find(".otherRowinput").toggle('fast');
       }
	});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="one">question A</label> 
<div class="form-radio">
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="one" class="showOtherFiled" >
			<i class="helper"></i>yes
		</label>
	</div>
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="one">
			<i class="helper"></i>no
		</label>
	</div>
</div>
</div>
</div>

  <div class="col-md-12 otherRowinput">
 <div class="form-group">
	   <textarea id="my1" name="my1"  type="text" class="form-control">
	     
	   </textarea>
  </div>
  </div>
</div>



<div class="row">
<div class="col-md-6">
<div class="form-group mb-0">
<label for="two">question B</label> 
<div class="form-radio">
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="two" class="showOtherFiled" >
			<i class="helper"></i>yes
		</label>
	</div>
	<div class="radio radio-inline">
		<label>
			<input type="radio" name="two">
			<i class="helper"></i>two
		</label>
	</div>
</div>
</div>
</div>

  <div class="col-md-12 otherRowinput">
 <div class="form-group">
	   <textarea id="my1" name="my1"  type="text" class="form-control" required></textarea>
  </div>
  </div>
</div>

Upvotes: 1

Related Questions