jQuery toggle CSS?

Question

I want to toggle between CSS so when a user clicks the button (#user_button) it shows the menu (#user_options) and changes the CSS, and when the user clicks it again it goes back to normal. So far this is all I have:

$('#user_button').click( function() {     $('#user_options').toggle();     $("#user_button").css({             borderBottomLeftRadius: '0px',         borderBottomRightRadius: '0px'     });      return false; }); 

Can anybody help?

Answer 1

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"); });