Question

First sorry for my english as it is not my first language.
I am building a timeline website for a school project and it is going great but one thing keep bugging me.

I have these balls and when clicked they open a div behind them and close all others and set some classes so i know they are opened.

Works great if you try to open a different one then the one that is allready open.

Now here is the problem if i open one and click it again to close it I get this far into the code:

if($('.balkln, .balgrt').hasClass("open")){
      console.log("Clicked and there is a open class active!");

but it will never fire the animation that is set next even though it has the class infoopen

$(".infoopen").stop().animate({

Link to the website:
http://kloek.skippy.nu

Anybody got an idea?

Thanks

Answer 1

The problem is that you are trying to see if either a .balkln or .balgrt have an element with class open inside of them. Your code checks if .balkln or .balgrt have that class themselves.

Try to change your code to this:

if($('.balkln, .balgrt').find(".infoopen")){ // this will look for open divs within balls
  console.log("Clicked and there is a open class active!");

That condition should be true and it’s what you want. Furthermore I sense that your code has structural errors in that you look for a ball that is open and next you look for an info div to close. What you want is to look for a ball that is open and close the info div it contains. Your code will work for now, but you’ll run into trouble when you’ll allow for multiple balls to be open at the same time as closing one will result in closing all of them.