jQuery show div on clicking textarea

I have following code:

<div class="question">
 <span class="text_area>
  <textarea name="text1" id="response1" rows="3" cols="50"/>
 </span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_1"/>
  <span>
   <input class="questionbutton" id=send1Button/>
  </span>
</div>
<div class="question">
 <span class="text_area>
  <textarea name="text1" id="response1" rows="3" cols="50"/>
 &开发者_StackOverflow社区lt;/span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_2"/>
  <span>
   <input class="questionbutton" id=send1Button/>
  </span>
</div>
<div class="question">
 <span class="text_area>
  <textarea name="text2" id="response3" rows="3" cols="50"/>
 </span>
<div>
<div class="questionRespond">
 <input type="checkbox" name="chk_3"/>
  <span>
   <input class="questionbutton" id=send3Button/>
  </span>
</div>

Basically it is texarea and below that there is a checkbox and button. I want the checkbox and button to only show when user click on textarea. Can this be done in jQuery?

First of all make sure that the elements which should be hidden are initially hidden since nobody did yet click the textarea, obviously. Then you'd want to attach a click handler to all of the textareas with show the checkboxes and buttons.

// Initially hide controls (should be better done without JavaScript)
jQuery('.questionRespond').hide();

// Handle the clicks
jQuery('.question textarea').click(function(){
    // this points to the textarea, look for the question div first, then the following response controls
    var respondControls = jQuery(this).closest('.question').next();
    respondControls.show();
});

Remember to fix your HTML since you're repeating identifiers and omitting quotes.

initially hide the questionRespond class with css then following jquery will show the div

    $('.text_area textarea').click(function(){
         $(this).closest('.question').next().show();
    })

you could use focus

$(document).ready(function(){
$('.questionRespond').hide();

$('textarea').focus(function(){
   $(this).closest('div. question').next('div.questionRespond').show();
}
);
});

// make questionRespond display:none
<div class="questionRespond" style="display:none">

// this will show the divs on clicking textarea
$('textarea').focus(function(){

      jQuery(this).closest('.question').find('.questionRespond').show();       
})


// this function will hide divs when you leave that textarea
$('textarea').blur(function(){

      jQuery(this).closest('.question').find('.questionRespond').hide();       
})

Try this

$(document).ready(function(){

 $(".questionRespond").hide();

  $("textarea").each(function(){
      $(this).click(function(){

        var qrcontainer = $(this).closest(".question").next(".questionRespond");
        qrcontainer.show();


   });
});