How do I toggle CSS with jQuery?

Question

I have the following code:

$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});

That is triggered by a click.function().

I would like that to be a toggle - so when I click the element, it changes the border to what I have above...but when it is clicked again it disappears or rather sets the border to ' '.

Thoughts?

Edit: I should have been explicit...but I don't want to create a CSS class. The reason being is because when I do that, it messes up the formatting of the element being styled. I am sure that it is some small quirk somewhere that would fix it, but I am not interested in wading through the entire code base to fix little positioning issues with a new class. I would much rather just edit the css attribute directly - because it doesn't interfere with the layout.

Edit2: Here is the jsfiddle of the code I am trying to edit. If you notice, I have the CSS attributes last. But how do I let that be toggled ?

Edit3: If anyone is interested...the UI that this will be used in is for my webapp - http://www.compversions.com

That was the first thing I did, but due to the way my code is it was giving me problems. Which is why I came here. — marcamillion
– marcamillion, Commented Dec 22, 2010 at 21:24

Cole · Accepted Answer · 2010-12-22 22:10:35Z

17

$("trigger-element").toggle( function() {
   $(element-to-change).css({ 'border' : '5px solid #000'});
   }, function () {
   $(element-to-change).css({ 'border' : 'none'});
});

Try This

    $(document).ready(function() {
        $('#panels tr table tr').toggle(function () {
            var $this = $(this),
                tr_class = 'dash-elem-selected';
            if (!$this.parent('thead').length) {
                if ($this.hasClass(tr_class)) {
                    $this.removeClass(tr_class);
                    tr_class = 'removeClass';
                } else {
                    $this.addClass(tr_class).siblings().removeClass(tr_class);
                    tr_class = 'addClass';
                }
                $this = $this.parents('td table').siblings('.sit-in-the-corner').text();
                $('#bc' + $.trim($this) + ' span')[tr_class]('bc-dotted-to-solid');
                $('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});
            }
        }, function() {
   //This is your new function that will turn off your border and do any other proccessing that you might need.
$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : 'none'});
});
    });

edited Dec 22, 2010 at 22:10

answered Dec 22, 2010 at 21:11

Cole

7405 silver badges8 bronze badges

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

3 Comments

marcamillion Over a year ago

I think this is the closest to what I want to do.

marcamillion Over a year ago

However, I am not quite sure how to apply it to my code: jsfiddle.net/BMWZd/4 Thoughts?

marcamillion Over a year ago

I tried that and this is what I got...using your code exactly as you pasted it: jsfiddle.net/BMWZd/7 The issue is, that once you click one of the elements in the box, it stays black when you are trying to remove it. So the other function in the toggle doesn't seem to be working (i.e. 'border' : 'none').

lonesomeday · Accepted Answer · 2010-12-22 21:12:05Z

15

I would do this by defining a withborder class and toggling that class.

CSS:

.withborder {
    border: 5px solid #000;
}

jQuery:

$('#bc' + $.trim($this) + ' span.dashed-circle').click(function(){
    $(this).toggleClass('withborder');
});

answered Dec 22, 2010 at 21:12

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

6 Comments

John Hartsock Over a year ago

@lonesomeday. i agree with your analysis except for one thing. OP did not say that the click event was on $('#bc' + $.trim($this) + ' span.dashed-circle')

lonesomeday Over a year ago

@John Hartsock I read "when I click the element" as referring to the element referred to in the selector.

John Hartsock Over a year ago

@lonesomeday Your assumption may be correct but I just wanted to point it out.

marcamillion Over a year ago

Thanks for this answer, but I was not specific enough. I don't want a new class. I have updated the question to add more specificity.

lonesomeday Over a year ago

@marcamillion As you like, but there's no functional difference between doing this inline with css and with a class.

|

John Hartsock · Accepted Answer · 2010-12-22 21:18:21Z

12

you could create a CSS class for this

.specialborderclass {
  border: 5px solid #000;
}

Then in javascript toggle the class using jQuery toggleClass() method

$('.yourSelector').toggleClass("specialborderClass");

edited Dec 22, 2010 at 21:18

answered Dec 22, 2010 at 21:12

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

3 Comments

hunter Over a year ago

no . in the class name when you call toggleClass(".specialvorderClass")

marcamillion Over a year ago

Thanks for this John, but I don't want another class. I want to simply edit the css. I have updated the question to reflect this.

hyde Over a year ago

I love this technique, especially because the code is concise and separates your CSS from JavaScript. Kudos!

Adam · Accepted Answer · 2010-12-22 21:11:57Z

4

Use toggle.

$("#IDOfElementYouClickOn").toggle(
      function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : '5px solid #000'});},
      function(){$('#bc' + $.trim($this) + ' span.dashed-circle').css({ 'border' : ''});}
    );

answered Dec 22, 2010 at 21:11

Adam

45.1k17 gold badges107 silver badges145 bronze badges

1 Comment

marcamillion Over a year ago

Adam, i like what you did here....but I am not quite sure how to apply to my code. See jsfiddle.net/BMWZd/4 for what I am working with. I have also updated the question again.

Collectives™ on Stack Overflow

How do I toggle CSS with jQuery?

4 Answers 4

3 Comments

6 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

6 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related