CODEWITHSUNDEEP
javascriptjquery
Bharat Negi
Bharat Negi

Reputation: 507

how to show hide single area in multiple div

we have one problem in code, in my code function there is main div area and inside this we have two radio button when we change or select radio there is two section one is for textarea and one for file up load button, when we click they show and hide.

please find the link of my code:- https://jsfiddle.net/bharat_negi/bw6uw9ah/

jquery code :-

function changeCheck(){       
      $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {   
        var changeOption = $(this).closest('.radioArea').attr("data-id");
        console.log(changeOption);

        if (this.value == 'Image') {
            $('.textArea').show();
            $('.browseArea').hide();
        }
        else if (this.value == 'Text') {
            $('.textArea').hide();
            $('.browseArea').show();
        }

      });

    }

Upvotes: 3

Views: 69

Answers (4)

akbansa
akbansa

Reputation: 393

You can find working jsfiddle here without so much changes to your code

function changeCheck(){       
          $('.questionBlock').on('change', 'input[type=radio]', function() {    

            if (this.value == 'Image') {
        console.log($(this).parent())
                $(this).parents('.questionBlock').find('.textArea').hide();
                  $(this).parents('.questionBlock').find('.browseArea').show();
            }
            else if (this.value == 'Text') {
                $(this).parents('.questionBlock').find('.textArea').show();
                            $(this).parents('.questionBlock').find('.browseArea').hide();
            }

          });

        }

Multiple checkbox toggle with image and textarea

Upvotes: 2

Jino Shaji
Jino Shaji

Reputation: 1105

Here $(this).parent().closest('div') will get the 'radioArea' div then you call the .next() it will retrieve next div after the 'radioArea' which is 'textArea' div so in this way you can perform show or hide functionality corresponding to the item that you clicked.

  $(this).parent().closest('div').next().next().show();//show browseArea div
  $(this).parent().closest('div').next().hide(); //hide textArea div


changeCheck();

		function changeCheck(){		  
		  $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {	
		  	var changeOption = $(this).closest('.radioArea').attr("data-id");
		  	console.log(changeOption);

		  	if (this.value == 'Image') {
        $(this).parent().closest('div').next().next().show();//show browseArea div
        $(this).parent().closest('div').next().hide(); //hide textArea div
         
		    }
		    else if (this.value == 'Text') {
         $(this).parent().closest('div').next().next().hide(); //hide browseArea div
         $(this).parent().closest('div').next().show(); //show textArea div
		    }

		  });

		}
.questionBlock{ float: left; margin: 0; padding: 10px 0; width: 100%; display: flex;}
.questionBlock .alloption{float: left; margin: 0; padding: 0; width: 100%; clear: both;}
.questionBlock .text{ display: inline-block; margin: 0; padding: 0; width: 10%;}
.questionBlock .radioArea{ display: inline-block; margin: 0; padding: 0; width: 20%;}
.questionBlock .textArea{ display: inline-block; margin: 0; padding: 0; width: 70%;}
.questionBlock .browseArea{ display: inline-block; margin: 0; padding: 0; width: 70%; display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
				<div class="text">Option 1</div>
				<div class="radioArea" data-id="upload1">
					<input type="radio" name="gender" value="Image" checked> Image 
		  			<input type="radio" name="gender" value="Text"> Text
				</div>
				<div class="textArea">
					<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
				</div>
				<div class="browseArea">
					<input type="file" name="" class="" id="">
				</div>
			</div>
			
			<div class="questionBlock">
				<div class="text">Option 2</div>
				<div class="radioArea" data-id="upload2">
					<input type="radio" name="gender" value="Image" checked> Image 
		  			<input type="radio" name="gender" value="Text"> Text
				</div>
				<div class="textArea">
					<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
				</div>
				<div class="browseArea">
					<input type="file" name="" class="" id="">
				</div>
			</div>

			<div class="questionBlock">
				<div class="text">Option 3</div>
				<div class="radioArea" data-id="upload3">
					<input type="radio" name="gender" value="Image" checked> Image 
		  			<input type="radio" name="gender" value="Text"> Text
				</div>
				<div class="textArea">
					<textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
				</div>
				<div class="browseArea">
					<input type="file" name="" class="" id="">
				</div>
			</div>

Upvotes: 0

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

Here is updated jquery function:

changeCheck();

    function changeCheck(){       
      $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {   
        var changeOption = $(this).closest('.radioArea').attr("data-id");
        console.log(changeOption);

        if (this.value == 'Image') {
            $(this).closest('.questionBlock').find('.textArea').show();
            $(this).closest('.questionBlock').find('.browseArea').hide();
        }
        else if (this.value == 'Text') {
            $(this).closest('.questionBlock').find('.textArea').hide();
          $(this).closest('.questionBlock').find('.browseArea').show();
        }

      });

    }

I have used $(this).closest('.questionBlock') to get the relevant textarea and fileupload elements.

Upvotes: 1

prasanth
prasanth

Reputation: 22500

Try this.You need target the element of textarea from the closest parent otherwise its target all the texarea element.That why its hiding all the textarea and choose buttons.And also change the matching if with Text else with Image

changeCheck();

function changeCheck() {
  $('.questionBlock').on('change', 'input[type=radio][name=gender]', function() {
    var changeOption = $(this).closest('.radioArea').attr("data-id");
    console.log(changeOption);

    if (this.value == 'Text') {
      $(this).closest('.questionBlock').find('.textArea').show();
      $(this).closest('.questionBlock').find('.browseArea').hide();
    } else if (this.value == 'Image') {
      $(this).closest('.questionBlock').find('.textArea').hide();
      $(this).closest('.questionBlock').find('.browseArea').show();
    }

  });

}
.questionBlock {
  float: left;
  margin: 0;
  padding: 10px 0;
  width: 100%;
  display: flex;
}

.questionBlock .alloption {
  float: left;
  margin: 0;
  padding: 0;
  width: 100%;
  clear: both;
}

.questionBlock .text {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 10%;
}

.questionBlock .radioArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 20%;
}

.questionBlock .textArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 70%;
}

.questionBlock .browseArea {
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 70%;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questionBlock">
  <div class="text">Option 1</div>
  <div class="radioArea" data-id="upload1">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>

<div class="questionBlock">
  <div class="text">Option 2</div>
  <div class="radioArea" data-id="upload2">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>

<div class="questionBlock">
  <div class="text">Option 3</div>
  <div class="radioArea" data-id="upload3">
    <input type="radio" name="gender" value="Image" checked> Image
    <input type="radio" name="gender" value="Text"> Text
  </div>
  <div class="textArea">
    <textarea rows="4" cols="50"> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.</textarea>
  </div>
  <div class="browseArea">
    <input type="file" name="" class="" id="">
  </div>
</div>

Upvotes: 2

Related Questions