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

Answer 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)