Develop Reference

Multiple clicks on same element removes classes

I got the problem that I wanted to add and remove classes on clicking an element. But if I click the same element twice, the added classes will be removed. I don't really get whats the problem here.
$('#01').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").toggleClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").toggleClass("show-forms");
} );
Also is there a way to use the same function for more elements, something like this:
$('#01, #02, #03').click( function() {...
I tried this but it didnt worked
$('#01', '#02', '#03').click( function() {...

To assign the same function to multiple selectors your first code should work (see here for reference: https://api.jquery.com/multiple-selector/)
$('#01, #02, #03').click( function() {} );
It's not overly clear from your example where you are adding the classes, I think you are probably looking to use addClass (https://api.jquery.com/addClass/) as opposed to toggleClass (https://api.jquery.com/toggleClass/). addClass adds the class to the selected element. Whereas toggleClass will add the class to the selected element if it doesn't already have the class, and if it does have the class it will remove it. So that could be why the second time you click it removes the class?
Try the following:
$('#01').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").addClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").addClass("show-forms");
} );
Or if you want multiple selectors:
$('#01, #02, #03').click( function() {
$(".d1").removeClass("show-forms");
$(".d2").removeClass("show-forms");
$(".pick-notice").addClass("hide-forms");
$(".d0").removeClass( "hide-forms" );
$(".d0").addClass("show-forms");
} );

You can use this for selecting muntiple class at a time :
$("#01, #02, #03").click( function() {...});
This will work on each Id

I don't get the first part of your question but for the second part of your question:
I think it'd be a much better solution to make it a class
so 01,02,03 are all a certain class (i.e. .clickable)
with this you can just $(.clickable).click(function(){

find siblings and addclass using javascript only

I want to add class on siblings of target Element in javascript. I have done this before using jquery which is pretty easy. But In my current organization they do not use jquery and I need to done with javascript and that is very difficult for me.
I have write some code that will attached a click function to an matched element but afterward I am not getting any login to how to make it happend. fiddle
var elements= document.getElementsByTagName('*'),i;
i=0;
while(elements[i]){
if(elements[i].className=='c'){
elements[i].addEventListener('click',function(){
this.jsSiblings().jsAddClass('newClass')
})
}
i++
}
Array.prototype.jsSiblings= function(){
//code
}
Array.prototype.jsAddClass=function(){
//code
}

You can use the base function in JS to add a class, element.classList.add("anotherclass"); (from MDN) and here you will find out about siblings without jQuery : How to find all Siblings of currently selected object

event if only one div has class

i have lots of divlayers with the class named ".current". depending on what the user does some of remove the class and some will get it again. this works fine, but what i want to is fire an event if only one div layer has the class ".current". how can i detect if only one element has the class current?
for example
if ($('#div4').hasClass('.current')) {
alert("fire me something");
}
something like "is the only one" hasClass.

in your event callback, simply check the number of divs that have the current class:
if ($('#div4').hasClass('current') && $('div.current').length === 1) {
...do stuff...
}
If you're only ever using current on divs, then you could just use $('.current').length === 1.

you should be able to use the css class as the selector and then get the length:
if($(".current").length == 1 ) {
alert('fire me something');
}

I "think" you could do:
if($('.current').length == 1) { //DO }
I believe the selector will return an array of the elements.

You have error syntaxe! you should add an ")" for your condition. and dont use the calss selecotr (".") . that's will work:
if($('#div4').hasClass('current')){
alert("fire me something");
}

You could see how many instances of the class .current that there are by using length. e.g.
var mycount = $(".current").length;
alert(mycount);
Then do whatever you like with the result.

See http://api.jquery.com/size/ or http://api.jquery.com/length/
$(".current").length
$(".current").size() *deprecated as of v1.8
Either will give you the count. Anytime you adjust the class check to see the count and fire the action if its 1

jquery toggle id's instead of classes?

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

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

Check if element is a div

How do I check if $(this) is a div, ul or blockquote?
For example:
if ($(this) is a div) {
alert('its a div!');
} else {
alert('its not a div! some other stuff');
}

Something like this:
if(this.tagName == 'DIV') {
alert("It's a div!");
} else {
alert("It's not a div! [some other stuff]");
}

Solutions without jQuery are already posted, so I'll post solution using jQuery
$(this).is("div,ul,blockquote")

Without jQuery you can say this.tagName === 'DIV'
Keep in mind that the 'N' in tagName is uppercase.
Or, with more tags:
/DIV|UL|BLOCKQUOTE/.test(this.tagName)

To check if this element is DIV
if (this instanceof HTMLDivElement) {
alert('this is a div');
}
Same for HTMLUListElement for UL,
HTMLQuoteElement for blockquote

if(this.tagName.toLowerCase() == "div"){
//it's a div
} else {
//it's not a div
}
edit: while I was writing, a lot of answers were given, sorry for doublure

Going through jQuery you can use $(this).is('div'):
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Some of these solutions are going a bit overboard. All you need is tagName from regular old JavaScript. You don't really get any benefit from re-wrapping the whole thing in jQuery again, and especially running some of the more powerful functions in the library to check the tag name. If you want to test it on this page, here's an example.
$("body > *").each(function() {
if (this.tagName === "DIV") {
alert("Yeah, this is a div");
} else {
alert("Bummer, this isn't");
}
});

let myElement =document.getElementById("myElementId");
if(myElement.tagName =="DIV"){
alert("is a div");
}else{
alert("is not a div");
}
/*What ever you may need to know the type write it in capitalised letters "OPTIO" ,"PARAGRAPH", "SPAN" AND whatever */

I'm enhancing the answer of Andreq Frenkel, just wanted to add some and it became too lengthy so gone here...
Thinking about CustomElements extending the existing ones and still being able to check if an element is, say, input, makes me think that instanceof is the best solution for this problem.
One should be aware though, that instanceof uses referential equality, so HTMLDivElement of a parent window will not be the same as the one of its iframe (or shadow DOM's etc).
To handle that case, one should use checked element's own window's classes, something like:
element instanceof element.ownerDocument.defaultView.HTMLDivElement

Old question but since none of the answers mentions this, a modern alternative, without jquery, could be just using a CSS selector and Element.matches()
element.matches('div, ul, blockquote');

Try using tagName