Question

I have following html code with 5 textarea’s and 5 buttons below them. What i want is to show button only when text area is clicked. It is like this:

• Textarea1 (clicked) -> show button1
• Textarea2 (clicked ->show button2 and (hide) button1

I tried following jQuery:

$('.questionRespond textarea').focus(function(){ 
      $(this).closest('.questionRespond').find('.questionRespondTools').show();
 }) 

What this is doing is showing button below textarea when textarea is clicked. What i want is to hide that button when second text area is clicked. I tried this code:

$('.questionRespond textarea').blur(function(){ 
      $(this).closest('.questionRespond').find('.questionRespondTools').hide();
 }) 

This is not working as it hides the button all together when i go outside of the textarea.
Can anyone please help me with how to do this?

Answer 1

You could hide all the other buttons first each time:

$('.questionRespond textarea').focus(function(){
      $('.questionRespondTools').hide();
      $(this).closest('.questionRespond').find('.questionRespondTools').show();
})