make a div editable

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


Sorry for changing the classname.


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>


$(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.



  • Does AOP with AspectJ works with method from Managed Bean called from the view in JSF2?
  • Android, How to theme font colour for just TextView Widgets?
  • Dynamic controls: associated events don't fire if recreated during Page_Load
  • Change variable scope of function in Javascript
  • API (curl)Command to Approve a promoted build Job in Jenkins
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Ruby and class variables in inherit class
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • MAVEN : Run Multiple Maven Project using Maven Test
  • Why isn't my “Fizz Buzz” test in R working?
  • TFS - how do I sum child task hours to parent
  • Python PIL to extract number from image
  • jquery validation - waiting for remote check to complete
  • cell spacing in div table
  • Most efficient way to move table rows from one table to another
  • CodeIgniter URI Parameter is partially bypassing an “if” statement
  • opencv display image without x server
  • Row to Column conversion in Talend
  • Custom preprocessing in caret
  • calculate gradient output for Theta update rule
  • Is it possible to open regedit and navigate to straight to a specific key using process.start?
  • How to clear text inside text field when radio button is select
  • Android fill_parent issue
  • How to delay loading a property with linq to sql external mapping?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • When should I choose bucket sort over other sorting algorithms?
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Unanticipated behavior
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • How to disable jQuery.jplayer autoplay?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy