jQuery toggle CSS?
For jQuery versions lower than 1.9 (see https://api.jquery.com/toggle-event):
$('#user_button').toggle(function () { $("#user_button").css({borderBottomLeftRadius: "0px"});}, function () { $("#user_button").css({borderBottomLeftRadius: "5px"});});
Using classes in this case would be better than setting the css directly though, look at the addClass and removeClass methods alecwh mentioned.
$('#user_button').toggle(function () { $("#user_button").addClass("active");}, function () { $("#user_button").removeClass("active");});
I would use the toggleClass function in jQuery and define the CSS to the class e.g.
/* start of css */#user_button.active { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; /* user-agent specific */ -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; /* etc... */}/* start of js */$('#user_button').click(function() { $('#user_options').toggle(); $(this).toggleClass('active'); return false;})
You might want to use jQuery's .addClass and .removeClass commands, and create two different classes for the states. This, to me, would be the best practice way of doing it.