JQuery switch CSS?

Question

I want to switch between CSS, so when the user clicks the button ( #user_button ), he shows the menu ( #user_options ) and changes the CSS, and when the user clicks it again, he returns to the normal state. So far, that's all I have:

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

Does anyone help?

Answer 1

 $('#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 css directly, but look at the addClass and removeClass methods mentioned above.

 $('#user_button').toggle(function () { $("#user_button").addClass("active"); }, function () { $("#user_button").removeClass("active"); }); 

Answer 2

I would use the toggleClass function in jQuery and define CSS for the class, for example.

 /* 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; }) 

Answer 3

You might want to use jQuery . addClass and . removeClass and create two different classes for states. This, for me, would be the best way to do this.

Answer 4

A better option would be to set the class style in CSS, for example .showMenu and .hideMenu , with different styles inside. Then you can do something like

 $("#user_button").addClass("showMenu");