Develop Reference

Removing active class if clicking active link a second time?

I came across a question that wanted to add an active link to the currently clicked menu item.
The solution was to add:
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Now how can we remove the active class if we click the active link a second time? I'm guessing we need to use toggleClass() but I haven't been able to make it work. Note only one link should have active class at a time.
Here is a demo: http://jsfiddle.net/A6dqQ/

You can do:
$('a').click(function(e){
e.preventDefault();
var $a = $(this);
$a.toggleClass('active').siblings().removeClass('active');
});

Use toggleClass() then:
$(this).toggleClass("active");
Code:
$("a").click(function(){
$(this).toggleClass("active");
$("a").not(this).removeClass("active");
});
FIDDLE DEMO

Check if current link is active then add/remove active class based on that, Try this:
$("a").click(function(){
var $this = $(this);
var isActive = $this.hasClass('active');
$("a").removeClass("active");
isActive ? $this.removeClass("active") : $this.addClass("active");
});
jsFiddle

here you have a simple answer:
$("a").on("click", function() {
$("a").removeClass("active");
$(this).addClass("active");
});
$("nav").on("mouseleave", function() {
$("nav").find("a").removeClass("active");
});
What this does is, when your mouse leaves the nav it will automatically remove you active class on a. here you have the DEMO

Something like this?
$("a").click(function () {
var $this = $(this);
if ($this.hasClass("active")) {
$this.removeClass("active");
} else {
$("a").removeClass("active");
$this.addClass("active");
}
});
Fiddle

hide content when div clicked

I'm creating a new site and I want to add a button that hides certain sections of the site when clicked. Right now I'm using the code below and it works fine but I just need it to do one more thing. How can I make it add a new class to the button when it's clicked so I can reposition the clicked button using css? Thanks in advance!
Here is the js code i'm using right now.
$(".hide-content").click(function() {
$(".site-header, #page-entry, .site-footer").toggle(500);
});
$(".hide-content").toggle(function() {
$(this).text("Hide");
}, function() {
$(this).text("Show");
});
});

Try .addClass()
$(".hide-content").click(function() {
$(".site-header, #page-entry, .site-footer").toggle(500);
$(this).addClass('ClassName'); //add class
});
Also Read Class Attribute
.toggleClass()
.removeClass()
this
.toggle() has been deprecated and removed

$(".hide-content").click(function () {
$(".hide-content").addClass("new-class")
$(".site-header, #page-entry, .site-footer").toggle(500);
});

$("body").on('click', '.hide-content', function (e) {
var $el = $(this);
$(".site-header, #page-entry, .site-footer").toggle(500, function () { //when complete..
$el.addClass('myclass');
});
});

Use the addClass function
$(".hide-content").click(function() {
$(this).addClass("class-name")
$(".site-header, #page-entry, .site-footer").toggle(500);
});
Or you could do css directly on jquery using the .css function
$(".hide-content").click(function() {
$(this).css("position", "absolute"); //note that params in css function is only an example, do what you need..
$(".site-header, #page-entry, .site-footer").toggle(500);
});

jquery on() with addClass/removeClass

I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});

try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient

This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});

Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });

Set class to active and remove it when another menu item is selected bug

I tested out the script below in jsfiddle and it works fine, can someone guide me how to fix it? This is the url that I need it working in, the wizard style menu at the top right should should have each item set to active when clicked and then removed when another menu item is clicked: http://morxmedia.com/clients/temp/45p/index_vertical.html
Here is the code I am using for this:
<script type="text/javascript">
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
</script>

You are binding the click event to div elements when you should bind them to a elements like so
$(document).ready(function(){
$('.wizard-steps > div > a').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});

Try this.
$(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
});

better to include that on a ready
$(document).ready(function() {
$('.wizard-steps div').click(function(e) {
e.preventDefault();
$('a').removeClass('active');
$(this).addClass('active');
});
});

As far as I can see (in your CSS). The class active should go on the div under wizard-steps and the parent of the a-tag.
Try this:
<script type="text/javascript">
$('.wizard-steps div a').click(function(e) {
if (e.preventDefault)
e.preventDefault();
else
e.stop();
$('.wizard-steps div').removeClass('active');
$(this).parent().addClass('active');
});
</script>

It can be done in another way using jquery using .not()
Jquery Code:
$('.wizard-steps div').click(function() {
$('.wizard-steps div').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/surendraVsingh/PLbbr/

JQuery add class on current item

I have this method that changes an larger image source on click.
I need to add a 'current' class on the selected. I have no problem adding this class,but I need it to remove the class on the other, previous, selected item.
This is the code I'm using at the moment:
$(document).ready(function() {
$("ul.timgs li a").click(function(e) {
e.preventDefault();
var path = $(this).attr("href");
$("div.tour-image img").attr({"src": path});
});
});
Thanks :-)

This should work:
$("ul.timgs li a").click(function(e) {
$(".current").removeClass("current");
$(this).addClass("current");
...
}

Before you add the "current" class to the new current item, remove it from the previous current item:
$(".current").removeClass("current");