CODEWITHSUNDEEP
jqueryhtml
Rajul
Rajul

Reputation: 103

better way to show/hide div element after click on input field

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.

Upvotes: 0

Views: 8800

Answers (3)

Beat Richartz
Beat Richartz

Reputation: 9622

I think your example is pretty straightforward. If I were you, I would cache the selectors for performance reasons:

var showExample1 = $('.show-example1');
var showExample2 = $('.show-example2');

And then go and use them accordingly in your code, using fast id selectors rather than slow input/name selectors:

$("#phone").bind("click", function(e){
   e.preventDefault();
   showExample1.hide();
   showExample2.show(400);
});

And so on. You could also bind the click event into a single one to minimize the code and have better readability:

$("#name, #phone").bind('click.toggle', function(e) {
  e.preventDefault();
  if ($(this).prop('id') == 'name') {
     showExample1.hide();
     showExample2.show(400);
  } else {
     showExample2.hide();
     showExample1.show(400);
  }
});

The namespace on the click binder ('.toggle') helps if you want to unbind it at a later point.

IF you wanted to have really DRY code, you could try something like this:

var togglers = {phone: 'show-example1', name: 'show-example2'};
$.each(togglers, function(toggler, toggled) {
   $('#' + toggler).on('focus', function(e) { // if you call focus, also selecting the input via keyboard will work
     e.preventDefault();
     $('.' + toggled).show(400).siblings().hide(); // hiding all the elements on the same DOM level instead of just one
   });
});

Upvotes: 0

Trogvar
Trogvar

Reputation: 856

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.

Upvotes: 1

Fermis
Fermis

Reputation: 181

I would suggest doing .on('click', function(event){ instead of bind. Here is a page explaining a little bit about that.

It looks like you are trying to make jQuery accordions. Check out that link.

Upvotes: 0

Related Questions