We Keep Coding

making a loop for click function?

I am trying to make the following functions work continually as a loop as it is to control open panels in an accordion but I can only seem to get this function to run the once to add the class to the initial clicked element (upon 1st click) and once again to remove the class (upon 2nd click) from the element upon clicking another panel in the accordion. Then it no longer adds or removes classes with the click function? Please help, I am pretty new to all this! Thanks
$(document).ready(function() {
$('dt').click(function() {
//alert( "Handler for .click() called." );
$(this).next().andSelf().addClass('.openAcc');
$('dt').click(function() {
$('dt').next().andSelf().removeClass('.openAcc');
});
});
});
basically i want to be able to click on any dt element in the accordion and either turn on or off the previous/current accordions class

You are adding new click handlers every time you click, and they will be active at the same time, one will undo the effect of the other, ...etc.
It often is a bad sign when event handlers are assigned within a handler for the same event.
In fact, jQuery has a nice function for what you want: toggleClass:
$(document).ready(function (){
$('dt').click(function() {
$(this).next().andSelf().toggleClass('.openAcc');
});
});

Instead of worrying about a loop, you can just remove all .openAcc classes, then add it to the current one.
$(document).ready(function (){
$('dt').click(function() {
//alert( "Handler for .click() called." );
$('.openAcc').removeClass('.openAcc');
$(this).next().andSelf().addClass('.openAcc');
});
});
Optimized code with help from #squint

turning div boxes into hotlinks, without overwriting the buttons they already have - JQuery

I am trying to turn the whitespace inside the pink boxes you see below into links associated with each object. I have been trying to just make the box clickable to google.com, and numerous tries do not swap the appropriate element. My most recent attempt is looks as follows, where the first jquery function of hovering over "article" does work, but the new one below it doesn't. The page is as follows:
https://jsfiddle.net/codyc54321/zpLy3og8/1/
$( ".linkbox" ).hover(
function() {
$( this ).attr("href", "www.google.com")
}, function() {
$( this ).attr("href", "#")
}
);
I need the Archive/Edit/Delete buttons to retain their functionality, even though the sit within the larger pink box. How can I make this box clickable without overriding my other 3 buttons using jquery?

You will need to stop propagation on click of your anchor to avoid to events firing. Like below:
$('a').click(function(e){
e.stopPropagation();
});
To activate click on your outer div, you may add the below function:
$('.article-link').on('click',function(){
// Do something
});
Wrap both these function inside document.ready and you are good to go.

jQuery selectors not working with added class

I'm working on a php/jQuery store and have run into the following problem:
I have a few div boxes as articles and as soon as a box is clicked, it is moved into the shopping cart and therefore has to become inactive.
That's my code so far:
$( ".artbox" ).not( ".inactive" ).on('click', function(){
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive")
})
It adds the class .inactive to two div objects, which are positioned inside each other. The rest of this function is left out here to keep it short. The problem is that while the according styles for .inactive are applied, I can still click on the box again and again and the function will be called again and again (although I have added the .not() selector) which results in having this specific article in the shopping cart multiple times - and this is what I would like to prevent. If I reload the page manually everything is fine and this
$( ".artbox.inactive" ).on('click', function(){
$(this).effect( "shake", {distance:1});
})
works, too (it doesn't for the items added without reloading).
But I am looking for a solution that works without reloading because I am displaying a popup window with a sucess message after the item was added to the cart.
JSFiddle
I've tried this here https://stackoverflow.com/a/12202186/2842292 but unfortunatly can't get it to work in my example.
Thanks in advance!

You can do it in two ways:
You unregister the event listener upon the click.
You can do it adding this to the event listener: $(this).unbind();,
You add an additional check at the very top of the listener:
if($(this).hasClass("inactive")) return;
Then if it even runs, it will quit and will not do the job.

The eventbinding happens on page load, so you should build the logic in the function:
$( ".artbox" ).on('click', function() {
if ($(this).hasClass("inactive")) {
$(this).effect( "shake", {distance:1});
} else {
$(this).addClass("inactive");
$(this).find("#artbox").addClass("inactive");
}
});

How can I get an effect to fade out before another fades in, with an "if/else" statement in jQuery?

I have been trying different things for a while now, but I'm still unable to get one DIV to fade out, and have another one fade in. I have searched the site, but I'm still new to jQuery, so I don't understand certain syntax and whatnot.
If someone could explain the easiest way to have my code check to see if a DIV is already in-view (probably with an if statement)--if not, having the DIV selected by the user fade in. If one is already in view, have it fade that DIV out, and fade in the newly selected one.
Thanks, again!

Theres a callback for the fadeIn and fadeOut functions in jQuery, you just need to add the code inside that callback:
$( "#willDisappear" ).fadeOut( "slow", function() {
// #willDisappear is Hidden.
$( "#willAppear" ).fadeIn("slow");
});
Or the other way:
$( "#willAppear" ).fadeIn( "slow", function() {
// #willAppear is Visible now.
$( "#willDisappear" ).fadeOut("slow");
});
Javascript uses events, callbacks are just functions you pass to, in this case fadeIn, to use whenever an event is triggered, in this case when fadeIn is complete.

If i understood correctly, you can use the :visible selector to check the visibility of an element to hide it using fadeOut and show the other element using fadeIn in the callback of fadeOut function.
$('input').click(function(){
if($('#first').is(':visible'))
$('#first').fadeOut('slow',function(){
$('#second').fadeIn('slow');
});
else
$('#second').fadeOut('slow',function(){
$('#first').fadeIn('slow');
});
});
Demo

Slow "hide" an element while moving it toward another element on the page?

I think allrecipes.com used to do this when you favorited a recipe, the thumbnail would sort of fly up to your recipe box and then disappear
The slow/fast hide shrinks to a point, but I'd like it to do that same effect by move toward another element on the page instead of "the beginning of the line" default effect
Here is the code I'm using now from the jQuery API docs:
// Hide box on click
$( "#hideBox" ).click(function() {
$( "#box" ).hide( "fast", function() {
});
});

You need to use .animate instead. Have a look at the documentation, here. :)