Question

I’m trying to create a slide out div function. Basically, it’s a rectangle shaped image map – and when you click on a location on the map, a DIV slides out from the right to cover the entire map. I need to do this for multiple locations (i.e. multiple DIVs)

I tried a few functions from jQuery with no luck. The toggle effect only allows for an up or down motion, and I’m having trouble getting the .animate effect to work the way I want.

This Jfiddle is close to what I need but Im trying to get the active DIV to slide back out before the new one slides in (and the MAP DIV should always remain static, so when a DIV slides back out, you see the map before the new div slides in).

This is whats in the Jfiddle:

jQuery(function($) {

    $('a.panel').click(function() {
        var $target = $($(this).attr('href')),
            $other = $target.siblings('.active');

        if (!$target.hasClass('active')) {
            $other.each(function(index, self) {
                var $this = $(this);
                $this.removeClass('active').animate({
                    left: $this.width()
                }, 500);
            });

            $target.addClass('active').show().css({
                left: -($target.width())
            }).animate({
                left: 0
            }, 500);
        }
    });
});​

Answer 1

Based on your jQuery snippet, I came up with

$(document).ready(function() {
    $('div.panel').css('left', '-200px');

    $('a.panel').click(function() {
        var a = $(this);
        var p = $(a.attr('href'));
        var pw = p.width();

        //-- if we have an active panel, hide it. otherwise, just show target
        if ($('div.panel').hasClass('active')) {
            //-- reset all panels
            $('div.panel').animate({
                left: -pw
            }, 500, function() {
                //-- when that is complete, move target panel to position
                p.addClass('active').show().animate({
                    left: 0
                });
            });
        } else {
            p.addClass('active').show().animate({
                left: 0
            });
        }
    });
});

Updated jsFiddle: http://jsfiddle.net/rs2QK/982/

• Update #1
  CSS/HTML to keep original map div (#target1) showing. The CSS is a little redundant, but given the approach, it gets the job done.

• Update #2
  Updated fiddle link. I was under the impression it updated on save. Oops.