Develop Reference

change class of element, on each mouse click

I want to change class of element, everytime I click on it.
on css section I have:
myButton.btn_first_look {
/* some atributes */
}
myButton.btn_second_look{
/* some atributes */
}
little jquery:
$(document).ready(function(){
$('#myButton').click(function() {
$(this).toggleClass('btn_first_look');
$(this).toggleClass('btn_second_look');
})};
So, when I click on element, I expect jquery script to change element class from btn_first_look to btn_second_look and otherwise.
But boom. Nothing happend

toggleClass will take care of add and remove by itself
$('#myButton').click(function() {
$(this).toggleClass('btn_second_look btn_first_look');
};
Demo Fiddle

Use removeClass() and addClass() respectively
$('#myButton').click(function() {
//if button has class btn_first_look
if($(this).hasClass('btn_first_look')){
$(this).removeClass('btn_first_look');
$(this).addClass('btn_second_look');
}
//if button has class btn_second_look
else if($(this).hasClass('btn_second_look')){
$(this).removeClass('btn_second_look');
$(this).addClass('btn_first_look');
}
});
This adds whichever class the button doesn't have, and removes the class it does.

Try this.
If your element has class btn_first_look from the start, you can write
$(element).toggleClass("btn_first_look btn_second_look");
This will remove class btn_first_look and add class btn_second_look. If you do that again, it will remove class btn_second_look and reinstate class btn_first_look .

Add a parenthesis at the very end. Your first (function() has no close, so it won't work.

That will work for you
$(document).ready(function(){
$('#myButton').click(function(){
$(this).toggleClass('btn_first_look btn_second_look');
});
});

JQuery - Change Element's CSS When Hidden/Visible

I have a div toggle when an anchor is clicked. I'm trying to change an icon via class when the div is visible, and when it's hidden, but the code's not working.
Does anyone know how to do this?
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
}); code.hide();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}

You have to put the logic for checking the visiblity into the click handler. Otherwise, it will only execute once, and that is at the overall beginning of the script execution.
// Toggle design/code
$(".design-n-code").click(function() {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$(this).addClass('code-active');
} else {
$(this).removeClass('code-active');
}
});
code.hide();

The test for the visibility of the code should be in the handler. In the handler, this is referring to the clicked element, so you must call addClass / removeClass to the element #icon-id instead (adapt #icon-id to your proper id).
// Toggle design/code
$(".design-n-code").click(function(e) {
code.toggle();
// Handles the icon so users know it's active when code is visible.
if (code.is(':visible')) {
$('#icon-id').addClass('code-active');
} else {
$('#icon-id').removeClass('code-active');
}
});
code.hide();

You say you have an anchor which when clicked, toggles another element, a div. The use of 'this' when clicked won't change the other element's class then.
You would want something like this:
HTML
CLick me to toggle the other div
<div id="toBeToggled" class="IsShown">I have class abc</div>
JS
$('#toggler').click(function() {
var target = $('#toBeToggled');
if (target.is(":visible")) {
target.addClass('IsHidden').removeClass('IsShown');
target.hide();
// Demo purposes
console.log(target.attr('class'));
} else {
target.addClass('IsShown').removeClass('IsHidden');
target.show();
// Demo purposes
console.log(target.attr('class'));
}
});
JS FIDDLE EXAMPLE

jQuery toggle class on dynamically assigned class

I'm trying to toggle a class on a single button, where the class would be dynamically assigned based on a state. Here is my code:
$('body').on('click', '.button', function () {
var $itm = $(this).children(".icon");
if ($itm.hasClass('hide')) {
$itm.toggleClass('unhide', 'hide')
} else {
$itm.toggleClass('hide', 'unhide')
}
});
What I'm trying to achieve is this:
If a button has class .hide, the onclick toggles this class to .unhide, and vice versa.
So far the only time class toggling works is, is on the second click. The first click does not change anything.

.toggleClass accepts one or more class names separated by a space like this:
$('body').on('click', '.button', function () {
$(this).children(".icon").toggleClass("hide unhide");
});
Working example (with a tweak to your HTML): http://jsfiddle.net/jfriend00/9tV33/

change div class onclick on another div, and change back on body click

Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.

Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example

You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});

I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});

You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle

var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/

Jquery change CSS class on clicking

I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code
$(".btn").each(function ()
{
$(this).click(function () {
$(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");
});
});
<div class="course-Search-tabs">
A
B
C
D
</div>

You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.
$(".btn").click(function () {
if($(this).hasClass("course-btn-tab-selected"))
$(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
});
Edit: You can improve this by hold the last selected element and changing it class if it suits you.
previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {
previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
previouslyClicked = $(this);
});

Wrong usage of $.each()
Use this way:
$(".btn").click(function () {
$(".btn").removeClass("course-btn-tab-selected");
$(this).addClass("course-btn-tab-selected");
});

Should do the trick:
$(".btn").click(function () {
$(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");
});

There is another way:
$(".btn").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).addClass("course-btn-tab-selected");
});

First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.
Next find the previously selected button, remove the selected class and add the regular class.
Finally remove the regular class from the clicked button and add the selected class.
$('.btn').bind('click', function () {
var previouslySelectedButton = $('.course-btn-tab-selected');
var selectedButton = $(this);
if (previouslySelectedButton)
previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');
selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});
Alternatively here is a working example using your HTML: jsFiddle