I want to expand my input field when i enter my mouse to fill the entry or collapse its original width when i remove my mouse.

My Html Code

<div class="col-xs-4">
<input type="text" class="form-control" placeholder="All India" >
</div>
<div class="col-xs-6">
<input type="text"  id="service" class="form-control" placeholder="What Service Do You Need Today ?">
</div>

Script

$('#service').click(function() {
         $('#service').css({
         'width': '134%'
         });
});

JsFiddle

I want to expand my input field when i enter my mouse to fill the entry or collapse its original width when i remove my mouse.

My Html Code

<div class="col-xs-4">
<input type="text" class="form-control" placeholder="All India" >
</div>
<div class="col-xs-6">
<input type="text"  id="service" class="form-control" placeholder="What Service Do You Need Today ?">
</div>

Script

$('#service').click(function() {
         $('#service').css({
         'width': '134%'
         });
});

JsFiddle

• javascript
• html
• twitter-bootstrap
• css-transitions

6 Answers 6

You can use JQuery's 'Focus' method:

$('#service').on('focus',function() {
    $('#service').css({'width': '134%'});
}); 

Hope this helps.

To Resize on focus in and then focus out:

$('#service').on('focusin',function() {
    $('#service').css({'width': '134%'});
});
$('#service').on('focusout',function() {
     $('#service').css({'width': ''});
});

Hi now you can try to focus and blur

$( "#service" ).focus(function() {
  $('#service').css({ 'width': '134%' });
});

$( "#service" ).blur(function() {
  $('#service').css({ 'width': '100%' });
});

Demo

you can try this one:

$('#service').click(function() {
             $('#service').css({
             'width': '134%'
             });
     return:false;

        });

DEMO

Codepen http://codepen.io/noobskie/pen/pjEdqv

Your looking for the hover function right?

$( "#service" ).hover(
  function() {
    $( this ).css({'width': '134%'});
  }, function() {
    $( this ).css({'width': '100%'});
  }
);

Edit

Updated codepen click expands the input to 134% on mouseleave event returns back to normal

$( "#service" ).click(
  function() {
    $( this ).css({'width': '134%'});
  }
);
$( "#service" ).mouseout(function() {
    $( this ).css({'width': '100%'});
});

Try this one:

$('#service')
  .on('focusin',function() {
    $(this).width('134%');
  })
  .on('focusout',function() {
     $(this).width('100%');
  });

Either use

$('#service').on('blur',function() { 

         $('#service').css({
         'width': '100%'
         });

    });

or

$('#service').on('mouseleave',function() {

         $('#service').css({
         'width': '100%'
         });

    });