Question

I have two input field like this

<input type="text" class="span3" id name="name" >
<input type="text" class="span3" id name="phone" >

<div class="show-example1">
      show content 1
</div>
<div class="show-example2">
      show content 2
</div>

I want to show only div element “show-example1” after click on input field “name”

and show only div element “show-example2” after click on input field “phone”

For this i made two div element associated with each input field.

Below is my script for performing above action

 $('.show-example1').hide();
  $('.show-example2').hide();

$("input[name='name']").bind("click", function(event){

            $('.show-example2').hide();
            $('.show-example1').show(400);
            return false;

        }); 

    $("input[name='phone']").bind("click", function(event){

            $('.show-example1').hide();
            $('.show-example2').show(400);
            return false;

        });

My script is working fine but i just want to know a better way to do above action.

Answer 1

Here’s my solution. In short – I utilize tag attributes, focus and blur events to take care of this task.
The benefit of it, compared to others, is that you with few lines of jQuery you can cover all your form elements, without necessity to manually switch every other div on/off, while at the same time keeping the unobtrusive approach of you JS.

HTML

<form>
    Other information <textarea name="other_information" class="hintable" hint-class="show-example1"></textarea><br />
    Nationality <textarea name="nationality" class="hintable" hint-class="show-example2"></textarea><br />
    <div class="example show-example1">
        Example 1
    </div>
    <div class="example show-example2">
        Example 2
    </div>
</form>

CSS

.example
{
    display: none;
}​

JS

$('.hintable').focus(function() {
   $('.example').hide();
   $("."+$(this).attr('hint-class')).show();
});

$('.hintable').blur(function() {
   $('.example').hide();
});

​

Fiddle link.