I'm currently exploring a solution to have the LeaderboardButton change its DIV to include bottom border radius upon clicking (which it does). However, I'm wondering how to make it so that upon clicking again, the border radius resets back to none. In other words, you click once and get border radius, then click again for no border radius. Click for border radius again, and so on - an ON/OFF functionality for CSS radius settings.
Below is the code snippet:
$('#left-container').click(function(){
$('#leaderboard').slideToggle( "slow", function(){
$('#leadeboardButton').css({borderTopLeftRadius: 10,
borderTopRightRadius: 0,
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
WebkitBorderTopLeftRadius: 10,
WebkitBorderTopRightRadius: 0,
WebkitBorderBottomLeftRadius: 10,
WebkitBorderBottomRightRadius: 10,
MozBorderRadius: 10
}), function(){
$('#leadeboardButton').css({borderTopLeftRadius: 10,
borderTopRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
WebkitBorderTopLeftRadius: 10,
WebkitBorderTopRightRadius: 0,
WebkitBorderBottomLeftRadius: 0,
WebkitBorderBottomRightRadius: 0,
MozBorderRadius: 0
});
}
});