Question

I am having the div like below..

<div id="div1">Edit your content 
  <a id="link1" href="#">click to Edit</a>
  <textarea id="text1" cols="3"/>
  <input type="button" id="button1" value="Save" />
</div>

What i want is..

1. I want to show and hide the textarea and save button every time the link is clicked.

2. And when an save button clicked the textarea content has to be added before the textarea as listitem, every time the save button clicked the edited text has been updated into that list.

Please anyone guide me to do this..

Answer 1

The simples approach would be if the Edit your content part could be wrapped in a container of its own, so that the content of that container could be replaced entirely upon save:

<div id="div1">
   <span class="content">Edit your content</span>
   <a id="link1" href="#">click to Edit</a>
   <textarea id="text1" cols="3"></textarea>
   <input type="button" id="button1" value="Save" />
</div>

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   parent.find('textarea').val(parent.find('.content').html());
   parent.find(':input, .content, a').toggle();
});

$('#div1 > input[type=button]').click(function() {
   var parent = $(this).closest('div');
   parent.find('.content').html(parent.find('textarea').val());
   parent.find(':input, .content, a').toggle();
});

Demo

You’ll note that the declaration of parent could easily be replaced with #div1 in this particular example, but with this code, you could easily change the #div1 > a selector to one that matches several elements (i.e. .editable > a; demo)

---

Edit

It appears I misread your question the first time around, but the changes aren’t all that big.

Rather than setting the textbox to the value of your .content, you would clear it each time you’re showing it. Also, you might not want to hide the .content each time the edit link is clicked. At the click of the save button, you create a new element, and append that after the last .content, rather than updating the existing one.

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   parent.find('textarea').val('');
   parent.find(':input, a').toggle();
});

$('#div1 > input[type=button]').click(function() {
   var parent = $(this).closest('div');

   $('<div/>', { 'class': 'content' })
       .html(parent.find('textarea').val())
       .insertAfter(parent.find('.content:last'));

   parent.find(':input, a').toggle();
});​

Note that I’ve changed .content to a div, because of its block-level behavior. This should of course be reflected in the initial markup as well.

Demo

---

Edit (2)

To account for your question in comments, about adding the textarea and save button upon link click, you’d have to make a few changes. First of all, the link click listener would have to be updated with code to add the elements, and presumably with a first check to see whether or not they exist already (i.e. second click of link button):

$('#div1 > a').click(function() {
   var parent = $(this).closest('div');
   var txt = parent.find('textarea');

   if(txt.length == 0) {
       txt = $('<textarea/>', { id: 'text1', cols: 3 });
       txt.appendTo('#div1');

       $('<input />', { type: 'button', id: 'button1' }).val('Save').appendTo('#div1');
   }

   txt.val('');
   parent.find(':input, a').toggle();
});

Second, your listener $('#div1 > input[type=button]') will no longer work exactly as written, because there is no such button in the document at the time when the selector is evaluated. To fix this, you could either use a live delegate, such as:

$('#div1').on('click', 'input[type=button]', function() { ... });

Demo. (for earlier jQuery versions, use .delegate(selector, event, handler) rather than .on(event, selector, handler).)

… Or, you could add the listener immediately to the button as you’re creating it:

$('<input />', { type: 'button', id: 'button1' })
    .val('Save')
    .appendTo('#div1')
    .click(saveEdit);

Demo

As a bonus, I’m adding focus to the textbox after showing it in these demos. You may want that as well.