Text box display when click on the edit button

I have to display the text boxes and list boxes when click on the edit button. Please give suggestion to how to do that things.

HTML:

<div class="textboxes">
<ul>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
    <li><input type="text" id="txt" /></li>
</ul>
</div>

<input type="button" value="Edit" id="editBut" />

Javascript:

$("input[type='text']").blur(functio开发者_开发技巧n(){
    $(this).hide().after('<span class="dfk">' + $(this).val() + '</span>');
});

Here js fiddle : http://jsfiddle.net/thilakar/yvNuC/11/

Thanks

Try this

$("#editBut").click(function() {
 $('.textboxes span').hide();
 $('.textboxes input[type=text]').show();

});

Check this DEMO

Here is it: http://jsfiddle.net/yvNuC/14/

$("#editBut").click(function() {
      if ($('.textboxes').is(':visible')) {
         $('.textboxes').hide();
         // do save info
         $(this).val('Edit');
     }
     else {
         $('.textboxes').show();
         $(this).val('Save');
     }        
});

Or if you need to display values after saving: http://jsfiddle.net/yvNuC/16/