Question

http://jsfiddle.net/kfTFa/49/

I am trying to set up this functionality (basically big square = that’s the one you are on + animation between the two states). Default state is 8 squares at smaller size of two states, (larger state = class active) text area is empty.

1. user hovers over any item ->
   • square animates to larger state
   • text associated with the hovered item shows whilst hovered
2. user hovers out of item ->
   • text disappears
   • square reverts back to default state size
3. user clicks on x item ->
   • text of that item becomes the new default
   • square stays at active state (larger size)
4. user clicks on y item ->
   • the previous active item animates back to default state
   • y item text becomes new default text
   • y item stays at active large size state

I nearly have it, the only issue is that if you click on the same item twice, the active class ends up sticking to an item that it shouldn’t. Can’t quite get there!

Second click can either do nothing or unset it as the default (probably nothing is better).

Answer 1

DEMO: http://jsfiddle.net/kfTFa/50/

You can simply add a check to see if it’s already the active item.

if($(this).hasClass("active")) return;