Viewfinder split layout full page slider effect

Question

I am trying to build a split layout gallery where the images will only be fully revealed when the user clicks on a button. I managed to split the screen in two and show the pictures at full size but I am struggling to find an effective way to actually reveal the other side of the image without resizing.

This is where I am at right now:

http://jsfiddle.net/Bb844/

I have already tried the jQuery slideToggle() method but it would not deliver the result I am looking for. The idea is not to overlap class="left" with class="right", but rather, to drag class="left" –and vice-versa– off the viewfinder with an animation effect similar to that of the slideToogle method.

The function should be activated through the class="square" element.

Is there any way to achieve this?

Answer 1

How does this look?

I changed your HTML a bit and made your CSS fit the new HTML setup. The only thing to note is the jQuery is set up to where you need to have the .side a .square is affecting directly after the .square. Then I used the following to do the sliding action you're looking for

$('.square').click(function() {             // Fire when square is clicked
    if(!$(this).hasClass("active")) {       // If not fullscreen already
        $(".active").removeClass("active"); // Remove other active class(es)
        $(this).addClass("active");         // Make this have class active
        $('.side').stop().animate({"width":"0%"}); // Shrink the other elements
        // Make the nearest side full screen
        $(this).nextAll(".side").stop().animate({ "width":"100%"});
    } else { // If it's already open, put it back to the default
        $(this).removeClass("active");
        $(".side").stop().animate({"width":"50%"});
    }
});