Check out the fiddle I created: http://jsfiddle.net/44zAy/11/
The current functionality is almost there, but when you click inside the first input and then try to click inside the second one, the first one closes. The same thing happens if you click the x button.
What I'm aiming for is to keep the input open even when clicking inside another one, only closing it when moving focus away from it rather than on focusing on a different input. Is this achievable?
Below is the code snippet:
var inputWdith = '185px';
var inputWdithReturn = '68px';
jQuery('.resize-close').hide();
jQuery(".resize-input").on('focus', function() {
jQuery(this).animate({
width: inputWdith
},400);
jQuery(this).promise().done(function(){
jQuery(this).next('.resize-close').show();
});
}).bind('blur', function() {
jQuery(this).animate({
width: inputWdithReturn
},500);
jQuery(this).next('.resize-close').hide();
});
jQuery('.resize-close').click(function(){
jQuery(this).prev('.resize-input').animate({
width: inputWdithReturn
},500);;
});