is there a way to make a toggle function that first of all toggles only one css style element, such as background-color or something like that. and that selects an id instead of a class, for i know of the toggleClass, but im just wondering if it's possible with ids instead?

$("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible'); 
  $('li').live('click', function(e) {  
      e.preventDefault();
      if(!clickCount >=1) {
        $(this).css("background-color","#CC0000");
        clickCount++; 
        }  
       console.log("I have been clicked!");
       return false;
       });

is there a way to make a toggle function that first of all toggles only one css style element, such as background-color or something like that. and that selects an id instead of a class, for i know of the toggleClass, but im just wondering if it's possible with ids instead?

$("#gallery").load('http://localhost/index.php/site/gallerys_avalible/ #gallerys_avalible'); 
  $('li').live('click', function(e) {  
      e.preventDefault();
      if(!clickCount >=1) {
        $(this).css("background-color","#CC0000");
        clickCount++; 
        }  
       console.log("I have been clicked!");
       return false;
       });

• javascript
• jquery
• css

• 1 It would be easy to create, but it's not smart. Id's are used to uniquely identify a single element. Changing them is really confusing. – GolezTrol Commented Sep 12, 2011 at 22:08
• 1 Your question isn't clear to me. Do you want to toggle the background color of an object that you specify with an id? Or, do you want to toggle the actual id of an element? Toggling an id is usually the wrong thing to do so perhaps you can describe what you're really trying to accomplish and we can help with a better way to do so. – jfriend00 Commented Sep 12, 2011 at 22:11
• toggle the background color of an element. – AlexW.H.B. Commented Sep 12, 2011 at 22:15

4 Answers 4

You really should use classes for that. IDs are unique within a page and should be used as points where you catch events ( via $.live() or some other method which uses event delegation ). Besides , if you think of using IDs because they have higher specificity in CSS rules , then you are going the wrong way.

In short: bad idea, stick to toggling classes.

EDIT:

After reading OP's comment - I believe this is what he is looking for a way to highlight an "active" link on click. And Yes, teresko is definitely right that you should be toggling the classes, not the ID's.

This is the essence of a jQuery snippet that you may be looking for:

$("li").bind('click', function(){
   // remove the active class if it's there
   if($("li.active").length) $("li.active").removeClass('active');
   // add teh active class to the clicked element
   $(this).addClass('active');
}); 

Demo

Check out the jQuery toggle api.

It's a little confusing because a simple google search on jQuery toggle brings you to the show/hide toggle documentation. But, .toggle() can be used to alternate functions - you can even add more than two.

like so...

$("el").toggle(
       function(){
          $(this).css('background-color', 'red');
       },
       function(){
           $(this).css('background-color, ''); // sets the bg-color to nothing
       });

jQuery doesnt has toggleId() function . But you can create your own id toggle function .

function toggleId(className,id)
{
    var tag = document.querySelector('.'+className);
    tag.id = tag.getAttribute("id") ? '' : id;
}

toggleId("myClass","id");

this will toggle id ( id and NULL ) of myClass element .

another example for toggling between two id

suppose you want to toggle between two id ( id1 and id2 ) of an element then

function toggleId(className,id1,id2)
   {
       var tag = document.querySelector('.'+className);
       tag.id = tag.getAttribute("id") ? id2 : id1;
   }

toggleId("myClass","id1","id2");

$("click-element").bind('click', function(){

if($("your-element").is('#yourIdValue')){

$('your-element').removeAttr('id');

}else{

$('your-element').attr('id', 'yourIdValue');

}

});

});