jQuery Plugin To Expand and Collapse Input Field - Expandable Input

Expandable Input is a minimal jQuery plugin to smoothly expand the width of a input filed when focused/clicked and collapse it when lose focus.

How to use it:

1. Download and include the jQuery Expandable Input plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.expandable.js"></script>

2. Create an input field with a initial width on your web page.

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" style="width:250px;">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" style="width:250px;">
</div>
</form>

3. Call the plugin on the input fields and change the settings to suit your own needs.

<script type="text/javascript">
$(function(){
$("input").expandable({
width: 350,
duration: 300,
});
});
</script>

---

This awesome jQuery plugin is developed by armmer1. For more Advanced Usages, please check the demo page or visit the official website.