jQuery .toggleId() add remove div id?

Question

I have tried some solutions but nothing seems to work. I want to change the div id to one another (example: #red to #blue and then back to #red) just like .toggleClass(). I tried to toggle attribute but it didn't works.

I already used classes with !important tags to elements. So the only thing left is to use id's.

jsfiddle

HTML

<div id="red"></div>

CSS

#red{
    width:100px;
    height:100px;
    background:red;
}
#blue{
    width:100px;
    height:100px;
    background:blue;
}

JavaScript

$("#red").click(function () {
    $(this).attr("id", "#blue");
});

Answer 1

You're almost there - but you don't need the # in the .attr statement. It should be:

$(this).attr("id", "blue");

In this fiddle I've done it for you (spoiler alert).

Or a bit shorter version here.