jQuery toggle CSS?

Question

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?

Can you post your HTML/CSS snippets? – Mike Robinson Jul 26 '10 at 18:11 — Mike Robinson, Jul 26 '10 at 18:11

score 127 · Accepted Answer · edited Jan 14 '19 at 14:30

127

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

edited Jan 14 '19 at 14:30

Protector one

6,926
5
62
86

answered Jul 26 '10 at 18:10

Ian Wetherbee

6,009
1
29
30

7

This no longer works as this method was deprecated in jQuery 1.8 and removed in jQuery 1.9. See http://api.jquery.com/toggle-event/ – binaryfunt Jul 28 '16 at 22:35
But what if we have transition effect? in this case transition effect won't be applied, right? – Pedram marandi Sep 06 '17 at 10:48
1

This way it just adds the d-none (the boostrap class) to my div element, so I use `$('#user_button').toggleClass('active');` whenever button is clicked. – LiLika Feb 06 '23 at 13:10

Ties · Answer 2 · 2014-01-29T23:05:39.483

75

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

edited Jan 29 '14 at 23:05

answered Jul 26 '10 at 18:33

Ties

5,726
3
28
37

This is what I'd do too. Less styling in your JS then – David Yell Jul 28 '10 at 10:34
1

Why is this not the answer? – Levi Botelho Dec 11 '12 at 20:22
@Ties - It definitely pays to be the first to post. It's a shame because it forcibly has a negative impact on the quality of answers. Better a quick response than a thorough one. – Levi Botelho Dec 12 '12 at 12:17
Both are right answers, just depends on the method you want to use. I like this one though, thanks – Zach Dec 14 '13 at 11:22
Anyone reading through this. Please consider using this answer before using the answer marked for the solution. – Joseph Casey Sep 23 '14 at 14:50

score 4 · Answer 3 · answered Jul 26 '10 at 18:09

4

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.

answered Jul 26 '10 at 18:09

alecwh

984
2
10
17

4

toggleClass is equivalent to these unless you want to remove a different class than you are adding for some reason – Zach Dec 14 '13 at 11:23

score 2 · Answer 4 · answered Apr 07 '19 at 14:12

2

The initiale code must have borderBottomLeftRadius: 0px

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

answered Apr 07 '19 at 14:12

Mohamed CHIBANI

147
1
1
6

score 1 · Answer 5 · edited Jul 26 '10 at 18:14

1

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

edited Jul 26 '10 at 18:14

Ken Redler

23,863
8
57
69

answered Jul 26 '10 at 18:10

Munzilla

3,805
5
31
35

score 0 · Answer 6 · edited Jul 15 '21 at 11:17

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

score -1 · Answer 7 · edited Mar 21 '23 at 15:05

-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.

edited Mar 21 '23 at 15:05

TrampolineTales

808
3
14
31

answered Mar 16 '23 at 14:01

Chandrahas Patil

1

1

This answer seems very similar to the already accepted answer. – Shane Mar 21 '23 at 16:28

score -1 · Answer 8 · edited Mar 17 '23 at 20:40

-1

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

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

edited Mar 17 '23 at 20:40

Tyler2P

2,324
26
22
31

answered Mar 17 '23 at 06:43

XkriPt

1

2

This just repeats existing answers without any context or explanation. – ChrisGPT was on strike Mar 17 '23 at 16:35

jQuery toggle CSS?

8 Answers8

Linked

Related