Change TextBox Width with JQuery on Focus and Blur

by Dhanushka Chandana

HTML

<input type="text" placeholder="search">

CSS

input{
    padding: 10px;
    font-size:1em;
    width: 200px;
}

JavaScript

$(document).ready(function() {
          $('input').focus(function() {
               $(this).animate({width: '350px'}, 500);
          });
 
          $('input').blur(function() {
               $(this).animate({width: '200px'}, 500);
          });
});