Develop Reference

Click link, add class on div. Click other div remove class and add again after second

I want to add a class on a div when a link is clicked, but when I click on another link I want to remove the class and add again after 1 second. The purpose is to hide/show a div with CSS.
This is my code:
jQuery('.mapplic-pin').on('click', function(e) {
e.preventDefault();
if(jQuery(this).closest('.mapplic-map').hasClass('active')) {
jQuery('.mapplic-map').removeClass('active');
} else {
jQuery('.mapplic-map').removeClass('active');
jQuery(this).closest('.mapplic-map').addClass('active');
}
});

You can improve your question by providing examples of where you're getting stuck, but to help you along the way, heres some resources:
The documentation for jQuery .click() events
and
and here's Vanilla JS onClick
jQuery delay and Vanilla JS setTimeout

This is my code:
jQuery('.mapplic-pin').on('click', function(e) {
e.preventDefault();
if(jQuery(this).closest('.mapplic-map').hasClass('active')) {
jQuery('.mapplic-map').removeClass('active');
} else {
jQuery('.mapplic-map').removeClass('active');
jQuery(this).closest('.mapplic-map').addClass('active');
}
});

Add class to element when second div has class

I have a Li element (dropdown) that gets an Active class when parent div (button) is clicked. When this element have this class I want to give another div the same class. When the li element (dropdown) is clicked again the active class is removed, I then want to remove the active class on the second div aswell.
What I got so far:
$('document').ready(function() {
if ($('li').hasClass('active')) {
$("#site-overlay").addClass("active");
}
});
This works a bit on the way in console- it gives my second div the correct class. It doesnt work live though, I guess I cant just call it on pageload? It also doesnt remove the class.

$('li').on('click', function(){
if($(this).hasClass('active')) {
$("#site-overlay").addClass("active");
} else {
$("#site-overlay").removeClass("active");
}
});

Your current example is not setting the active class on the LI elements, so nothing happens, but it should work something like this:
$(function () {
$('ul.megamenu > li').on('click', function () {
$("#site-overlay").toggleClass("active", $(this).hasClass('active'));
});
});
toggleClass can take a second boolean parameter that controls turning on/off the class based on a true/false value.
Note: I hacked the following JSFiddle just to show something working (the clicking just toggles the site-overlay state for now):
https://jsfiddle.net/TrueBlueAussie/doxdmxmL/16/

toggling class Jquery

I have created a play and pause button for my video, I have trying to switch class when the button is pressed, I.e when you click on the pause button the class switches to and vice versa.
Below is a snippet of my code of and the link to the code is also here
$('#play-pause-btn').click(function() {
$('#video-wall__content').get(0).paused ?
$('#video-wall__content').get(0).play() : $('#video-wall__content').get(0).pause();
});
does anyone know how this can be done?

Check out removeClass(), and addClass()...Well they do what they are named after.
http://api.jquery.com/removeclass/
http://api.jquery.com/addclass/
If you want to change the class. Try .attr()
$("#td_id").attr('class', 'newClass');
Or .toggleClass():
$("#td_id").toggleClass('change_me newClass');

You can remove/add the classes on click using removeClass and addClass.
$('#play-pause-btn').click(function(){
if ($('#video-wall__content').get(0).paused) {
$('#video-wall__content').get(0).play();
// now playing
$(this).removeClass("paused").addClass("playing");
}
else {
$('#video-wall__content').get(0).pause();
// now paused
$(this).removeClass("playing").addClass("paused");
}
});
Addding the class when the page is opened
If you have access to the HTML, just add it to your tag:
<div id="play-pause-btn" class="playing> [...] </div>
If you can use only JavaScript:
$(document).ready(function() {
$("#play-pause-btn").addClass("playing");
});

Remove previously added class by jQuery

I have a follow up question to this: Add and remove a class on click using jQuery?
I'm able to add a class to a specific li element using this snipped by Jamie Taylor:
$('.team').on('click', 'li', function() {
$('.team li#member').removeClass('more');
$(this).addClass('more');
});
I'd like to remove the Class .more again, by clicking a toggle element inside the li-item.
My jQuery Snippet which doesn't work:
$('.toggle-x').click(function () {
$('.team li#member').removeClass('more');
})
Thanks for the help!

In your code, it will remove the class form only one element with id member. If you want to remove the class from all the li elements, use like this,
$('.team li.more').removeClass('more');

try this
$(".innerLiContent").click(function(){
$(this).parentsUntil( "li" ).removeClass('more');
});

Your problem is because when you click on an element X inside the <li /> the element fires the click event, and if you don't use event.stopPropagation() the <li /> will also fire the click event and the class will be added again.
Try this:
$('.toggle-x').click(function (e) {
$('.team li#member').removeClass('more');
e.stopPropagation();
})
It should work if that's your problem.

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