Make div editable

Question

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

Please find the element structure of my Dom

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

Sorry for changing the class name.

Answer 1

Your jsfiddle example has been updated 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 can focus on the .container_settings_inner h4 attribute when they become editable so that the user knows or lights them up a bit.

http://jsfiddle.net/QqbyS/