Question

I need to make a whole div(with class container) editable when the user clicks on the Edit link. Using contenteditable attribute can make a div editable. But it happens only when we double click on that div. I also do not prefer to use any plugins for that. So basically the div should be editable if the user clicks on the Edit button. I am new to jquery and learning th basic stuffs. Please help.

Please find the structure of my Dom elements

http://jsfiddle.net/GeJkU/248/

Sorry for changing the classname.

Answer 1

Updated your jsfiddle example, to the correct class name and it works.

<div class="container ">
      <div class="container_settings_inner">
       <h4 class="fred"><div class="iconnameserver"></div> Test1</h4>
     </div>
 </div>

and

$(document).ready(function() {
    $("#edit").click(function()
    {
         $('.container_settings_inner').attr('contentEditable','true');
    });
});

You could put focus on the .container_settings_inner h4 attribute when they become editable so the user knows, or light them up a bit.

http://jsfiddle.net/QqbyS/