Question

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"/>
 </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?

Answer 1

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.