Develop Reference

Function for adding and removing style on click and unfocus

I am trying to implement a function which changes style of element on click and remove it when unfocus. For ex: When element2 is clicked, it should remove class of other elements, and add class to the clicked element only.
<div class="dope" id="element777"></div>
<div class="dope" id="element2"></div>
<div class="dope" id="element11"></div>
<div class="dope" id="element245"></div>
<div class="dope" id="element60"></div>
.....(More are created automatically, numbers are not estimatable)
I couldnt know the element ids that are created. The only remains same is class.
I have tried this, but its an unprofessional approach.
$('#element1').click(function(){
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element1").blur(function(){
$("#element1").removeClass(dope);
});
$('#element2').click(function(){
$("#element2").addClass(dope2);
$("#element1").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
});
$("#element2").blur(function(){
$("#element2").removeClass(dope);
});
What is the best approach for automating this function, instead of adding click and blur (unfocus) function to ALL of elements ?

You can listen for click events on any div with an id containing the word "element', then target its siblings elements (those that are not clicked, without referring to them by id). This might do it:
$("div[id*='element']").click(function(){
$(this).addClass('dope').siblings('.dope').removeClass('dope');
});

Your jQuery could be vastly simpler if you leverage this and siblings:
Instead of:
$("#element1").addClass(dope2);
$("#element2").removeClass(dope);
$("#element3").removeClass(dope);
$("#element4").removeClass(dope);
It could be:
$('.dope').click(
function() {
$(this).addClass(dope2).siblings().removeClass(dope);
}
);
NOTE:
Do you have a variable called dope with the class name, or is dope the class name? If it's the classname, you need to put it in quotes: $(this).addClass('dope2'), etc.
If you are removing the class dope, then will want to add a class you can always use to select these elements (so that when you remove dope, it continues to work).

Button part:
$("div").click(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).addClass("dope2");
$(".dope").not($(this)).removeClass("dope");
}
})
Blur part:
$("div").blur(function(){
if($(this).hasClass("dope") || $(this).hasClass("dope2")){
$(this).removeClass("dope");
}
}

I would recommend using the :focus css selector rather than using javascript to do what you are doing... Read more here. Instead of having a click listener, the focus selector will take care of that for you and automatically remove the styling when the element is out of focus.

Target currently clicked instance of element

I have multiple instances of a button element:
<div id="openambiance" class="openclose leftside"></div>
<div id="opendesign" class="openclose rightside"></div>
<div id="openperform" class="openclose leftside"></div>
They carry different ID's, as clicking on each of them opens different panel. I would like currently open panel to switch its open/close button background, as per definition in .openclose-active. Reality however is, they are all getting affected. My initial code looked like this and I quickly realised why they are all getting affected:
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(".openclose").toggleClass("openclose-active");
});
});
So I tried targeting specific elements:
$(this).find(".openclose").toggleClass( "openclose-active" );
That failed, so I went on to .siblings, .next and .parent, but with no luck. They are still either all switched or only previous instances get switched. I'm lost :(

this is the element you are looking for
$(document).ready(function() {
$("#openambiance").click(function(e){
$("#hiddenambiance").slideToggle(600,"easeInOutQuint");
$(this).toggleClass("openclose-active openclose");
});
});
You are clicking on the button which has the class openclose, so you need to toggle the class for this element not for any of its descendants

jQuery custom menu - adding and removing classes onClick

If someone can think of a better title for this question, please feel free to alter it. This is the issue: in a navigation menu, clicking an item should mark it red (default is orange). Both orange and red styles (class names bmark and bmark_active respectively) were generated using the CSS Button Generator application. This is the jQuery code which should do the job:
$(function () {
$('.bmark').click(function(){
$('.bmark_active').addClass('bmark');
$('.bmark_active').removeClass('bmark_active');
$(this).addClass('bmark_active');
$(this).removeClass('bmark');
});
})
It works fine for all buttons, except the default one ('All' in the fiddle example). So if you click 'Russia', for example, the red focus will move onto that button (by removing orange class and adding red class), but then when you click 'All' again, it doesn't switch to red. Why is that and how do I fix it?
JS Fiddle

You're not applying the click() event to the parent element, only applying it to the child elements:
$(function () {
$('.bmark, .bmark_active').click(function(){
$('.bmark_active').toggleClass('bmark').removeClass('bmark_active');
$(this).addClass('bmark_active').removeClass('bmark');
});
})
jsFiddle here.

Updated your fiddle do it that way. More simplified. The other answers here work fine but this is the least verbose way of handling it.
$(function () {
$('.bmark').click(function(){
$('.bmark').removeClass('active');
$(this).addClass('active');
});
})
http://jsfiddle.net/chazelton/52esG/2/

You're not binding on the '.bmark_active' element.
You can do this :
$(function () {
$(document).on('click', '.bmark_active,.bmark', function() {
$('.bmark_active').addClass('bmark').removeClass('bmark_active');
$(this).removeClass('bmark').addClass('bmark_active');
});
})
Demonstration
But most often I'd prefer to give the same class to all elements, and to only add or remove a class on the active elements, so that the event handling code would be
$('.bmark').removeClass('active');
$(this).addClass('active');
It also lets the CSS be cleaner as your two classes are, for now, mostly identical and it's better to have just the few changes between the two modes isolated in the 'active' class.

Need help manipulating class with jquery

I need help with this code:
$(document).ready(function() {
$(".fav").click(function() {
$(".fav").removeClass("fav").addClass("fav_");
});
$(".fav_").click(function() {
$(".fav_").removeClass("fav_").addClass("fav");
});
});
On click in .fav div, he transforms to .fav_ and vice-versa. Ok, but the problem is:
If you click one time to .fav class, he transform to .fav_. But if you click one time more, he don't transform again to .fav.
I tried put one var to check. ex:
if clicked one time: fav=true
if clicked two times: fav=false
but it doesn't work.
I understand jQuery, but my usual language is PHP, perhaps thence the difficulty.

You need to keep a reference to the DOM elements in a variable, and use that. This way you don't have to perform the jQuery selector again.
$(document).ready(function() {
var favs = $(".fav");
favs.click(function() {
favs.toggleClass("fav");
favs.toggleClass("fav_");
});
});
You can also use the toggleClass() method to add/remove the classes. If it tests with fav then it should toggle back and forward between fav and fav_. So there is no need for IF statements.
EDIT:
If you want to toggle the showing of the background image, then you don't have to remove the fav CSS class. Just toggle fav_ as it's background will override fav because it's lower in the CSS source.
$(document).ready(function(){
$(".fav").click(function(){
$(this).toggleClass("fav_");
});
});

What would cause myDivId.toggle() to work while myDivClass.toggle() does not?

I have some DIVs that I am using JQuery to hide and show using the toggle() function. This has been working fine.
But I just recognized some relationships between some of these DIVs that would allow me to group some of them into a class.
I was hoping that this would allow me to toggle the DIV class instead of each of the DIV ids.
So I want to do this:
$("#myDIVId1").click(function ()
{
$("myDIVClass").hide();
$("#myToggle1").toggle();
});
Instead of this:
$("#myDIVId1").click(function ()
{
$("#myToggle2").hide();
$("#myToggle3").hide();
$("#myToggle4").hide();
$("#myToggle5").hide();
$("#myToggle1").toggle();
});
But only this verbose ID access seems to work. Any ideas why?

When you select the class, you need to put a '.'
$(".myDIVClass").hide();