Develop Reference

How to change the class of a <li> element after clicking on a tab

I would like to modify the class of certain elements of my sidebar when some user clicks on a tab. In short, change the class of the sidebar elements to current class + " active"
I have implemented a partially working solution as I could after doing some research on my own.
This part of the code is key:
$(".setActive").click(function() {
$(".sidebar-item:contains('"+$(this).attr("data-target")+"')").parent().parent().addClass(' active');
})
Actually, with that line of code, I change the class to active but there is a problem:
I don't know how to remove the active class from the previously visited sidebar elements, then I am getting something like this:
How can I solve this issue?
JS FIDDLE LIVE DEMO

Remove all active class added before adding the current one
$(".setActive").click(function() {
$(".sidebar-element.active").removeClass('active');
$(".sidebar-item:contains('"+$(this).attr("data-target")+"')").parent().parent().addClass(' active');
})

Change html element class using JQuery has no effect

Actually i'm trying to change a class with jquery to a bootstrap badge item.
The item's are generated dynamically so on click of the table item i add to a variable the id of the anchor.
Then i've made 4 functions for each item of popover that you can see on the screen
Each of the popover anchors as CHIUSO RISOLTO etc. should change the main anchor class of the table item.
Actually i was trying to use something like this to change the class
function Risolt() {
$("#idticket").removeClass();
$('#idticket').addClass('badge badge-success');
}
I think the problem is on setting the id as onClick of table items i've set the following function
var idticket
function setId(id) {
idticket = id
}

SOLVED:
As i was setting of table item click the id to a variable the #idticket simply doesn't exist i just had to concatenate the variable in jquery and not add that as text.
Thank's all for helping.

At first you should replace $("#idticket").removeClass(); to $("#idticket").removeAttr('class');, then add any class you want.

You can use toggleClass jQuery to switch classes
$('#idticket').toggleClass("oldClass newClass");

jQuery: If class exists, remove it, then add it to new element

I'm working on an accordion style video section. I'm currently trying to check if a class exists on click. I want it to only open 1 section at a time, so I need to
Check if the class exists on click
If it does, remove class
Add class to the clicked element
I tried doing this with just addClass(); and toggleClass(); but am not 100% sure on what I'm missing.
Add Class
$(".contents-row").click(function(){
$(this).toggleClass("content-open");
});
Toggle Class
$('.contents-row').click(function(){
$(this).toggleClass('content-open');
});
This is the basic HTML set up
<div class="contents-row">
<div class="content-option press">
<div class="class-section-title">test1</div>
</div>
<div class="drop">
test 1
</div>
</div>
A full version of the drop down in on JSFiddle.
Thanks for the help!

First remove content-open class from all elements having content-open class. Then add the class to clicked element like following.
$('.contents-row').click(function(){
$('.content-open').removeClass('content-open');
$(this).addClass('content-open');
});

You need to remove the class content-open from all div with class contents-row first and then add to the currently clicked div.
$('.contents-row').click(function(){
$('.contents-row').removeClass('content-open');
$(this).toggleClass('content-open');
});

toggling classes on/off over multiple links

I can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.
<li>
<div class="yearaction year1">
</div>
2007
</li>
<li>
<div class="yearaction year2">
</div>
2008
</li>
<li>
<div class="yearaction year3">
</div>
2009
</li>
.
.
.
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
});
This implementation doesn't affect the other links. How do I make this toggle work correctly?

You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:
$(".gotoslide").click(function(){
// previously active
$(".activeyear").toggleClass("activeyear inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});

You have to toggle it individually. A good workaround is to attach data-* to each link.
Then
$(".gotoslide").click(function(){
$(this).toggleClass("activeyear inactiveyear");
var year = parseInt($(this).data('year')) - 1;
$('#year' + year).toggleClass("activeyear inactiveyear");
});

It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:
$(".gotoslide").click(function () {
$(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
$(this).addClass("activeyear"); // add .activeyear to this specific item
});

It doesn't affect the other links because by using:
$(this)
you are referring only to that particular instance of .gotoslide class (the one that was clicked).
To affect all the other elements with .gotoslide class, refer to them with:
$('.gotoclass')

You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active.
$(document).on('click','.gotoslide', function (e) {
if($('.gotoslide.active').length) {
$('.gotoslide.active').removeClass('active');
}
$(this).toggleClass('active');
});

You have to first clean up the other links and then set the clicked link to the correct class.
Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'
$(".gotoslide").click(function(e){
e.preventDefault();
$(".activeyear").removeClass("activeyear").addClass("inactiveyear");
$(this).toggleClass("activeyear inactiveyear");
});
Working example here: http://jsfiddle.net/hVLML/4/

Swap class on click

I've been trying to figure out how I'm supposed to change a class of an element when you click it.
At the moment i have two classes (cOpen and cClosed). When you open the page the div is set to 'cClosed'.
<div id="camera" class="cClosed" onClick="cameraToggle('weekLoaderWrapper', 'cameraContainer');">Kamera</div></a>
The things within onClick is not relevant to my question btw..
I've also put this script in the code
$('#camera').click(function() {
$(this).toggleClass('cOpen');
$(this).toggleClass('cClosed');
});
What I want it to do is to when you press the "camera"-div the class simply swaps to cClosed instead of cOpen, and vice verse when you click it again. This isn't working atm.
My problem is how i'm supposed to "toggle" the div so it swaps the class of the "camera"-div.

Why are you using two classes? Use one class to identify the open and none to denote closed.
$('#camera').click(function() {
$(this).toggleClass('cOpen');
});

It's as simple as:
$('div').click(
function(){
$(this).toggleClass('cClosed cOpen');
});​​​​​​​​​​​​​​
JS Fiddle demo.
Though I second Starx's suggestion in this; but it's your HTML.
Reference:
toggleClass().