jquery toggle id's instead of classes?

Question

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

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
– GolezTrol, Commented Sep 12, 2011 at 22:08
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
– jfriend00, Commented Sep 12, 2011 at 22:11

tereško · Accepted Answer · 2011-09-12 22:10:32Z

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.

answered Sep 12, 2011 at 22:10

tereško

58.5k26 gold badges100 silver badges151 bronze badges

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

Comments

Derek Adair · Accepted Answer · 2011-09-13 18:05:15Z

2

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

edited Sep 13, 2011 at 18:05

answered Sep 12, 2011 at 22:15

Derek Adair

22k31 gold badges101 silver badges134 bronze badges

3 Comments

tereško Over a year ago

It's nice and all , but you really should leave CSS to the content of *.css files. This is why you should used classes for toggling.

AlexW.H.B. Over a year ago

thanks for the function, but one question why does it take two clicks for the element to turn red? also i'm trying to figure out a way to make it so that only one of many <li> items can have this red background at one time, any ideas on how i can do that? thank you so much for your help. :)

Derek Adair Over a year ago

@ teresko - this is just demonstrating the toggle function, not standards for editing CSS. Essentially I was playing off the users demonstration to minimize confusion.

Jishan mondal · Accepted Answer · 2020-07-01 08:59:32Z

1

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");

edited Jul 1, 2020 at 8:59

answered Jan 3, 2020 at 11:53

Jishan mondal

6667 silver badges9 bronze badges

Comments

Pavan Kumar · Accepted Answer · 2022-01-18 07:01:09Z

0

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

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

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

}else{

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

}

});

answered Jan 18, 2022 at 7:01

Pavan Kumar

1

1 Comment

Oro Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

jquery toggle id's instead of classes?

4 Answers 4

Comments

EDIT:

Check out the jQuery toggle api.

like so...

3 Comments

another example for toggling between two id

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

EDIT:

Check out the jQuery toggle api.

like so...

3 Comments

another example for toggling between two id

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related