See how when you hover over the boxes, they turn blue; as well as the rounded rectangle with the number in it. Then, if you click "Google", a menu drops down and the box on top stays blue, but the rounded rectangle with the number inside does not.
I think you're going about it wrong. Instead of changing .val-google to .active-google you could just focus on the parent class/hover state. Change all of the values to just have a common class like '.value', then you you can change the style of it based on its parent:
See how when you hover over the boxes, they turn blue; as well as the rounded rectangle with the number in it. Then, if you click "Google", a menu drops down and the box on top stays blue, but the rounded rectangle with the number inside does not.
https://dl.dropbox.com/u/55017445/Stock/index.html#
(P.S. sorry for the weird id and class names)
I think you're going about it wrong. Instead of changing
.val-googleto.active-googleyou could just focus on the parent class/hover state. Change all of the values to just have a common class like '.value', then you you can change the style of it based on its parent:In fact, you should be removing the majority of jQuery that you're using. Let's see if I can whip up a quick Pen...
Ohh, I see! I just started learning jQuery and implementing it into simple projects like this.
I removed a bunch of code: http://codepen.io/ggilmore/pen/GaJcK
It's not perfect, but it should show you how you can continue.
You also had some bad practices going on with your list items by having the
<a>wrapping the<li>, it should be the other way around.@TheDoc Hey, the JS was accidentally deleted when I tried to copy it, can you do that part again, please? Thank you so much for you time helping me!
If you go to the link I posted above it should be there.