CODEWITHSUNDEEP
jquerycsstoggle
Edd Turtle
Edd Turtle

Reputation: 1531

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?

Upvotes: 81

Views: 302784

Answers (9)

Yarchick1034
Yarchick1034

Reputation: 1

$('#user_button').click(function () {  
  $("#user_button").toggleClass("active");
});

Upvotes: -2

Chandrahas Patil
Chandrahas Patil

Reputation: 1

$(document).ready(function(){

    $('#toggle').active('click', function(){
        $(".navbar-collapse").addClass("show");
    });

    $('#toggle .active').on('click', function(){
        $(".navbar-collapse").removeClass("hide");
    });

});

The Toggle menu has been closed and opened but the Navigation item is not closed.

Upvotes: -1

XkriPt
XkriPt

Reputation: 1

$('#user_button').on('click', function() {
  $("#user_button").toggleClass('active');
});

#user_option.active {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

Upvotes: -1

Khem Raj Regmi
Khem Raj Regmi

Reputation: 2270

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

Take a reference from the codepen example here

Upvotes: 0

Mohamed CHIBANI
Mohamed CHIBANI

Reputation: 156

The initiale code must have borderBottomLeftRadius: 0px

$('#user_button').toggle().css('borderBottomLeftRadius','+5px');

Upvotes: 2

Ian Wetherbee
Ian Wetherbee

Reputation: 6099

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

Upvotes: 127

Ties
Ties

Reputation: 5846

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

Upvotes: 75

Munzilla
Munzilla

Reputation: 3855

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

Upvotes: 1

alecwh
alecwh

Reputation: 984

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.

Upvotes: 4

Related Questions