turning on and off border radius on jquery click event

Question

There are few divs. I need to change the border radius of them with click event. i have managed to change the border radius only once. When someone click on a div, the border radous should be changed to 50%, And click on the same div again, applied border radius should remove.

And while there is a border changed div and if click on another div border of the changed div should remove and border radius should applied to clicked div. Which means there must be only one border radius applied div at a time.

I have this code

jsfiddle

HTML

<div></div>

<div></div>

<div></div>

<div></div>

ANd this css

div {
    width: 100px;
    height: 100px;
    background: #000;
    margin: 10px;
    float: left;
}

also this jquery code

$('div').each(function(){
    $(this).click(function(){
        $(this).css('border-radius', '50%');
    });
});

help me please, on this.. i have no idea about how to do this..

Answer 1

Use a class for that:

DEMO

$('div').click(function(){
    if($(this).is('.radius')){$(this).removeClass('radius'); return;}
    $(this).addClass('radius').siblings().removeClass('radius');
});


div.radius {
    border-radius:50%
}

Answer 2

You may want to provide more divs than this. So you should user a class to select them. I've updated your code and give you this function:

$('div.radius').each(function(){
    $(this).click(function(){
        $('div.radius').css('border-radius','0');
        $(this).css('border-radius', '50%');
    });
});

http://jsfiddle.net/C23a2/1/