Resizable using jQuery

This is the code which you can use to get resizable effect using jQuery :

<style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
  $( "#resizable" ).resizable();
 });
 </script>



<div class="demo">
 
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">Resizable</h3>
</div>

</div><!-- End demo -->



<div style="display: none;" class="demo-description">
<p>Enable any DOM element to be resizable.  With the cursor grab the right or bottom border and drag to the desired width or height.</p>
</div><!-- End demo-description -->