jquerycsstoggle

jQuery toggle CSS?


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?


Solution

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