jQuery toggle attribute value

Question

I want to toggle all element attributes with:

$('[contenteditable]').prop('contenteditable', !$(this).prop('contenteditable'));

It does only toggle to true the first time but not to false the second time. What is wrong?

Answer 1

UPDATED FIDDLE

As mentioned : it returns string so workaround is possible using ternary operator: One line solution

$('#contenteditable1').attr('contenteditable',$(this).attr('contenteditable')==='true'?'false':'true' );

Old=>

$('#contenteditable1').click(function()
   {
       if($('#contenteditable1').attr('contenteditable')==='true'){
           //alert("true");
           $('#contenteditable1').attr('contenteditable','false');
       }
       else{
            $('#contenteditable1').attr('contenteditable','true');           
       }
   });   

Answer 2

Use callback function with prop()

$('button').click(function() {
  $('#contenteditable1').prop('contenteditable', function(i, val) {
    return val == "false" ? true : false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contenteditable1">hiu</div>
<button>click</button>