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
– Mike Robinson

2010-07-26 18:11:06 +00:00
Commented Jul 26, 2010 at 18:11 — Mike Robinson
– Mike Robinson, Commented Jul 26, 2010 at 18:11

Protector one · Accepted Answer · 2019-01-14 14:30:25Z

128

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, 2019 at 14:30

Protector one

7,4185 gold badges69 silver badges89 bronze badges

answered Jul 26, 2010 at 18:10

Ian Wetherbee

6,1492 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

binaryfunt Over a year ago

This no longer works as this method was deprecated in jQuery 1.8 and removed in jQuery 1.9. See api.jquery.com/toggle-event

Pedram marandi Over a year ago

But what if we have transition effect? in this case transition effect won't be applied, right?

LiLika Over a year ago

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.

Ties · Accepted Answer · 2014-01-29 23:05:39Z

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, 2014 at 23:05

answered Jul 26, 2010 at 18:33

Ties

5,8563 gold badges30 silver badges37 bronze badges

5 Comments

David Yell Over a year ago

This is what I'd do too. Less styling in your JS then

Levi Botelho Over a year ago

Why is this not the answer?

Levi Botelho Over a year ago

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

Zach Over a year ago

Both are right answers, just depends on the method you want to use. I like this one though, thanks

Joseph Casey Over a year ago

Anyone reading through this. Please consider using this answer before using the answer marked for the solution.

alecwh · Accepted Answer · 2010-07-26 18:09:47Z

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, 2010 at 18:09

alecwh

9843 gold badges10 silver badges17 bronze badges

1 Comment

Zach Over a year ago

toggleClass is equivalent to these unless you want to remove a different class than you are adding for some reason

Mohamed CHIBANI · Accepted Answer · 2019-04-07 14:12:50Z

2

The initiale code must have borderBottomLeftRadius: 0px

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

answered Apr 7, 2019 at 14:12

Mohamed CHIBANI

1561 gold badge1 silver badge8 bronze badges

Comments

Ken Redler · Accepted Answer · 2010-07-26 18:14:55Z

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, 2010 at 18:14

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

answered Jul 26, 2010 at 18:10

Munzilla

3,8555 gold badges33 silver badges35 bronze badges

Comments

Austin · Accepted Answer · 2021-07-15 11:17:36Z

0

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

edited Jul 15, 2021 at 11:17

Austin

1071 silver badge6 bronze badges

answered Jun 22, 2020 at 11:10

Khem Raj Regmi

2,29022 silver badges22 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-03-17 20:40:28Z

-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, 2023 at 20:40

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Mar 17, 2023 at 6:43

XkriPt

1

1 Comment

Chris Over a year ago

This just repeats existing answers without any context or explanation.

TrampolineTales · Accepted Answer · 2023-03-21 15:05:05Z

-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, 2023 at 15:05

TrampolineTales

8274 gold badges15 silver badges32 bronze badges

answered Mar 16, 2023 at 14:01

Chandrahas Patil

1

1 Comment

Shane Over a year ago

This answer seems very similar to the already accepted answer.

Yarchick1034 · Accepted Answer · 2024-11-09 13:54:47Z

-2

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

edited Nov 9, 2024 at 13:54

answered Feb 1, 2016 at 21:37

Yarchick1034

12 bronze badges

1 Comment

SnareChops Over a year ago

Please provide an explanation of how this code solves the question. This will help the OP and future searchers learn from your answer.

Collectives™ on Stack Overflow

jQuery toggle CSS?

9 Answers 9

3 Comments

5 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

5 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related