jQuery Toggle Div Horizontaly
<p>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)</p>

<p>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.</p>

<p>This <a href="http://jsfiddle.net/rs2QK/979/" rel="nofollow"><strong>Jfiddle</strong></a> 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).</p>

<p>This is whats in the Jfiddle:</p>

<pre><code>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);
    }
});
</code></pre>

<p>});​</p>

<p>Any thoughts?</p>
