Change ID of class back after .toggleClass() is changed

Question

jq(".1st").click(
  function() {   
      jq(this).next("div").slideToggle("normal");
      jq(this).toggleClass(this).attr("id","standfeat2");
  }
);

When I click on the drop button it drops down a message, then I want it to switch back to the original class "standfeat" when its clicked again. I swear I have tried everything and I know its something simple. I'm switching between 2 css id's.. One has a + and one has a - . Thanks for all the help in advance!

This is my CSS:

#standfeat {
    color:#185596; 
    font-size:24px; 
    padding-left:40px; 
    background: url(../images/standfeat.png) no-repeat 4px 50%; 
    line-height:24px; 
    cursor:pointer; 
    margin:30px 0px; 
} 

#standfeat2 { 
    color:#185596; 
    font-size:24px; 
    padding-left:40px; 
    background: url(../images/standfeat2.png) no-repeat 4px 50%; 
    line-height:24px; 
    cursor:pointer; 
    margin:30px 0px; 
}

Id's or classes. They are very different. `.toggleClass(this)` doesn't make any sense because `.toggleClass` expects a string, not an element. "css id" vs id attrute vs css classes, what are you referring to? — Kevin B, Aug 27 '12 at 14:37
It changes the css from one to another. When it is clicked it switches and the css pulls a image as a -. But I just can't get it to switch back. Or if there is an easier way to do it? — Mac, Aug 27 '12 at 14:39
This is my css.. #standfeat { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; } #standfeat2 { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat2.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; } — Mac, Aug 27 '12 at 14:40
You should never have to programatically change the `id` of an element. — Eric, Aug 27 '12 at 14:42
@Mac: I edited your post, adding the css. `Eric:` Indeed that is correct. Changing the id programmatically can have all sorts of unwanted side effects. Not only does it possibly break any script which may be referring to the id of an element but also increases the risk of ending up with duplicate id values among other things. — Nope, Aug 27 '12 at 14:47

David Hellsing · Answer 1 · 2012-08-27T14:46:38.673

1

I assume you mean classes, not IDs. toggleClass does not toggle between two classes, it either adds or removes a class, f.ex:

jq(this).toggleClass('open');

First time this function is called, it adds the class open. Next time it removes it, etc. You can use that logic in your CSS to style the different states, f.ex:

li{ background: url('plus.png') no-repeat; }
li.open{ background-image: url('minus.png'); }

If you really want to toggle IDs, you could do something like:

this.id = this.id == 'standfeat' ? 'standfeat2' : 'standfeat';

edited Aug 27 '12 at 14:46

answered Aug 27 '12 at 14:40

David Hellsing

106,495
44
176
212

The last suggestion worked exactly how I wanted it to! Thank you. Sorry, I had a hard time explaining it. Next time if I write the code I won't switch between id's. Thank you again.!! – Mac Aug 27 '12 at 14:50
@Mac: Change your CSS to be referring to classes not referring to ids and switch out classes instead. What you doing right now is utter bad practice and most likely end up in a future issue due to some unexpected side-effects. – Nope Aug 27 '12 at 14:54
2

`toggleClass()` can toggle between classes... kinda. `jq(this).toggleClass('standfeat standfeat2');` – Xyan Ewing Aug 27 '12 at 14:57

nbrooks · Accepted Answer · 2012-08-27T15:02:33.260

1

It's probably not a good idea to modify the element id on click, it would be much cleaner to use classes for that purpose (which is why there is a toggleClass method but no toggleId method).

Modify your css to be:

.standfeat { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }
.standfeat2 { color:#185596; font-size:24px; padding-left:40px; background: url(../images/standfeat2.png) no-repeat 4px 50%; line-height:24px; cursor:pointer; margin:30px 0px; }

And then you can use the following jsL

jq(".1st").click(
    function() {   
        jq(this).next("div").slideToggle("normal");
        jq(this).toggleClass("standfeat standfeat2");
    }
);

Working demo (not including your images)

edited Aug 27 '12 at 15:02

answered Aug 27 '12 at 14:46

nbrooks

18,126
5
54
66

2

@David Actually, that works just fine, since the element will originally only have one of the classes when it is toggled that one will be turned off and the other will be turned on. The next time it is clicked, the classes are swapped again. Give it a try – nbrooks Aug 27 '12 at 14:52
OK, I hate to admit it but I was wrong: http://jsfiddle.net/aChgR/ however the logic is kind of awkward... – David Hellsing Aug 27 '12 at 14:57
2

Yep, @nbrooks is right. This is a great way to use `toggleClass()` – Xyan Ewing Aug 27 '12 at 14:58
1

@david It seems fairly intuitive and is really the cleanest way to alternate between two classes. It's a simple bit flip: one off and one on, flip both each time -- you will always have exactly one on and exactly one off. It's certainly the least repetitive syntax, anyway :) – nbrooks Aug 27 '12 at 15:08
@nbrooks , I am going to try this, but I have a question. If my id in my javascript is ".1st" can I have another id .standfeat in my css and call two id's? – Mac Aug 27 '12 at 15:52
@mac An element can only have a single, unique Id. You can however have multiple values for class, separated by spaces. e.g. ` – nbrooks Aug 27 '12 at 15:55

score 0 · Answer 3 · answered Aug 27 '12 at 14:38

0

You need to pass in a class name to toggleClass(), not a reference to an object.

jq(".1st").click(
  function() {   
      jq(this).next("div").slideToggle("normal");
      jq(this).toggleClass("someClassName").attr("id","standfeat2");
  }
);

answered Aug 27 '12 at 14:38

Gabe

49,577
28
142
181

Change ID of class back after .toggleClass() is changed

3 Answers3