Develop Reference

Jquery how to trigger click on an element that gains focus

I am working with caph framework and i trying to click in every id focused
$(event.currentTarget).on('selected',function() {
var value = $(this).prop('id');
$('#' + $(this).prop('id')).trigger('click');
});

You can access the event target with $(this) in jQuery. To automatically click on the selected element you could do
$(event.currentTarget).on('select', function() {
$(this).click()
// or $(this).trigger('click')
};
If I understand your question right though you're asking how to click every element with a given ID - please note that you should be using classes for this, as IDs are supposed to be unique. You could achieve that with the following:
$(event.currentTarget).on('select', function() {
$('.yourClassName').click()
};
This will click on every element with the given class.

Jquery add/remove class not working

I've got some jQuery that I'm using to change a class of two elements. It works once, and the elements change class once, but I want it to work interchangeably. so when they click they click the 'deselected' button it assigns itself the 'selected' class, and the 2nd button changes to a 'deselected' class.
Here's the jQuery:
$('.network_bar_deselected').on('click', function(){
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
and the HTML is quite simple:
<div class="network_bar_selected"><h4>Network Updates</h4></div>
<div class="network_bar_deselected"><h4>Latest Tweets</h4></div>

Since you're changing classes dynamically, you should use delegation:
$(document).on("click", ".network_bar_deselected", function() {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Your original code only binds the handler to the elements with the network_bar_selected class when the document is loaded, not to elements that get that class later.

Add the handler to both the classes
$('.network_bar_selected, .network_bar_deselected').on('click', function () {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Demo: Fiddle

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

Is there any special jQuery that would execute two different set of codes for one element?

I have code that lets me to show an element on click of one element and hide it on click of another. Code looks like:
$('.downloads').hide()
$('.downloads').css({visibility:'visible'})
var Dshow=false;
$('.allLink').click(function() {
if(!Dshow){
Dshow=true;
$(".downloads").fadeIn("fast");
$('#footer2').html($('#footer1').html());
$('#footer1').html('');}
});
$('.hideAllLink').click(function() {
if(!!Dshow){
Dshow=false;
$(".downloads").fadeOut("fast");
$('#footer1').html($('#footer2').html());
$('#footer2').html('');}
});
I want $('.allLink').click(function() to have 2 states - on first click it shall show ".downloads" and on second click hide.
How to do such thing with jQuery?

You can use .toogle(). This method will hide element if it's visible, or make it visible if it's hidden.
$('.allLink').click(function()) {
$('.downloads').toggle();
}

I think what you are looking for is a toggler: Use of jQuery toggle function
Use
$( "#idofthebutton" ).toggle(
function() {
/// hide the link
$(".downloads").fadeOut("fast");
}, function() {
///show the link
$(".downloads").fadeIn("fast");
}
);
This will work automatically to hide and show the links....
Note: In this case keep the links visible at first place. If you don't want that then change the order of the functions inside the .toggle