How to create facebook like edit box using jquery

Hai frnds, today im creating facebook like profile edit with jquery without using any database. Here i used the simple .toggle() function means it toggle two functions when a button is clicked, but the .toggle() function is available upto jquery 1.8 version if any one working with jquery 1.9 or above version it does not work so please download the below 1.8 jquery version. All the versions are available in jquery official site. Simply go to http://jquery.com/download/ website scroll down the page to Past Releases of jquery, Download and Enjoy it.

Sample Screenshot

In this example i'am including the jquery 1.7 version so dnt worry about it. Just copy the example and paste it in your notepad then save it as .html file and Run it. In the below example i have created the textbox and loaded image dynamically using jquery so observe the example carefully.

Right Click and save the above two images

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
{
$('#but').toggle(function(){ 
var val=$('h2').text();
$(this).css({background: 'url(close.gif) no-repeat'})
$('h2').empty();
$('h2').append('<input id="da" type="text" name="box" value="'+val+'"></input>');
},function(){
var value=$("#da" ).val();
 $(this).css({background: 'url(edit.gif) no-repeat'})
$('h2').html(value);
});
});
</script>
<style type="text/css">
<!--
a.edit  {
    float: right;
    background: url(edit.gif) no-repeat;
    padding:100px;
}
-->
</style>
</head>
<body>
<div align="center" style="padding-top:200px">
<div style="width:400px;border:#FF3366;border-radius:8px;
border-style:dotted;height:60px">
<h2>Click here to Edit</h2>
</div>
<div style="width:400px; padding:20px">
<a href="#" class="edit" id="but"></a>
</div>
</div>
</body>
</html>