jQuery toggle CSS?
JqueryCssToggleJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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");
});
Solution 2 - Jquery
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;
})
Solution 3 - Jquery
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.
Solution 4 - Jquery
The initiale code must have borderBottomLeftRadius: 0px
$('#user_button').toggle().css('borderBottomLeftRadius','+5px');
Solution 5 - Jquery
The best option would be to set a class style in CSS like .showMenu
and .hideMenu
with the various styles inside. Then you can do something like
$("#user_button").addClass("showMenu");
Solution 6 - Jquery
You can do this by maintaining the state as below:
$('#user_button').on('click',function(){
if($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0);
$(this).css('background-color', 'red')
}
else {
$(this).attr('data-click-state', 1);
$(this).css('background-color', 'orange')
}
});