JQuery Toggle property contentEditable = "true"

Question

I am using contenteditable="true" in a div

What I want to do it to toggle true and false on this attribute everytime I click on a div.

example:

$( "#mylabel" ).click(function() {
    $('#editablediv').attr('contenteditable','false');
});

I tried:

$( "#mylabel" ).toggle(function() {
    $('#editablediv').attr('contenteditable','false');
});

but that didn't work

How can I do this?

Answer 1

Try this way:

$( "#mylabel" ).click(function() {
    var value = $('#editablediv').attr('contenteditable');

    if (value == 'false') {
        $('#editablediv').attr('contenteditable','true');
    }
    else {
        $('#editablediv').attr('contenteditable','false');
    }
});

Keep me posted, hope this helped

Answer 2

Here is shorter than your shortest (Reusability and Character Count):

function editTheElement() {
    var a = "contenteditable";
    $(this).attr(a) === 'true' ? $(this).attr(a,'false') : $(this).attr(a, 'true');
}

or still

function editTheElement(e) {
    var a = "contenteditable";
    e.attr(a) === 'true' ? e.attr(a,'false') : e.attr(a, 'true');
}

or

function editTheElement(e) {
    var a = 'contenteditable';
    var v= e.attr(a);
    e.attr(a,!v);
}

or

function editTheElement(e) {
    var a = 'contenteditable';
    e.attr(a,!e.attr(a));
}

or

function editTheElement(e) {
    e.attr('contenteditable',!e.attr('contenteditable'));
}

JS is fun :)