Question

I’m using Quickflip 2 to create multiple ‘flip panels’ which all share the same wrapper class .quickFlip

within which are two ‘states’, these are .blackPanel (which is displayed ‘onload’) and .redPanel which is the reverse… or alternate ‘state’ – QuickFlip does the magic of flipping these states with a simple animation (apparently this works IE 8 > Safari, Firefox and Chrome… good stuff?!)

I have a problem: Because I’m dealing with multiple (up to 9) I’d like to automatically close (or reset) all open panels when selecting a new one.

The code:

    $(function() {
    $('.quickFlip').quickFlip();
    $('.redPanel').on('mouseleave',function(){
 $('.quickFlip').quickFlipper( {}, 0 );
  });
});​

Here’s an example of this in action on http://jsfiddle.net/sMYzS/152/

However… with this example it runs the animation (the flip) on each and every panel, in whatever state they are in.

I’m sure the answer lies with applying the .quickFlipper function to all but the active (can you say that in jQuery?) class / area. Sorry if I sound utterly lost.

I’m new to jquery have investigated using .each / .mouseover and adding different functions which use javascript:onclick to ‘hide’ each inactive state… but I’m now lost. After 15 hours of hacking around I decided to come here, which I’ve found a brilliant resource over the years. If you can point me in the right direction- that would be brilliant. Thanks!

Here are some similar hacks which I’ve tried to modify to meet my requirements:
jQuery Quick Flip switch back

Quickflip 2 Plugin – only having the image flipped once?

Answer 1

This fiddle fixes the issue you’re having:

• http://jsfiddle.net/vyyVh/1/

In your code above, this line

$('.quickFlip').quickFlipper( {}, 0 );

acts on all elements with the class “quickFlip” – i.e. all your panels.

By default the plugin watches for clicks on links with the class “quickFlipCta”, so I’ve added another handler to these elements which adds a class “flipped” to the wrapper div when clicked.

$('.quickFlipCta').click(function() {
    $(this).parents('.quickFlip').addClass('flipped');
});

Now instead of unflipping things with the class “quickFlip”, we can look for things with the class “flipped” instead, and remove the class once it’s unflipped.

$('.redPanel').on('mouseleave', function() {
    $('.flipped').quickFlipper({}, 0);
    $('.flipped').removeClass('flipped');
});

However if you want panels to stay flipped until you click another one, here’s a Fiddle to do that instead:

• http://jsfiddle.net/vyyVh/3/

This time the flip/unflip logic is all in the click handler – hopefully the comments make clear what’s happening there.