Slide out div, if div is open and other clicked, slide out and slide new one in

Question

Hopefully you can help on two parts here.

One is to help me realise how I can shorten/more my code more efficient in terms of best practice for jQuery.

The other is to expand on my code - I have a click to slide out div (using animate/left) but I have many iterations of this on the page. What I'm after is if a div has been clicked and slides out, and another one is clicked, the open div slides back and the new one slides out. And so on. Hope that makes sense.

jQuery

$('.each-brew.ale').toggle(function() {       
  $('.each-brew-content.ale').animate({ left: '0' }, 1000);
  $('.each-brew-content.ale').css('display','block');
}, function() {       
  $('.each-brew-content.ale').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.ale').css('display','none');
});
$('.each-brew.bramling').toggle(function() {       
  $('.each-brew-content.bramling').animate({ left: '0' }, 1000);
  $('.each-brew-content.bramling').css('display','block');
}, function() {       
  $('.each-brew-content.bramling').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bramling').css('display','none');
});
$('.each-brew.bullet').toggle(function() {       
  $('.each-brew-content.bullet').animate({ left: '0' }, 1000);
  $('.each-brew-content.bullet').css('display','block');
}, function() {       
  $('.each-brew-content.bullet').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.bullet').css('display','none');
});
$('.each-brew.miami-weisse').toggle(function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '0' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','block');
}, function() {       
  $('.each-brew-content.miami-weisse').animate({ left: '-100%' }, 1000);
  $('.each-brew-content.miami-weisse').css('display','none');
});

HTML

<div class="row">
    <div class="four columns first-margin-offset">
        <div class="each-brew-container delay-1">
                                        <div class="each-brew ale">
                <span class="each-brew-title">Ale<span class="each-brew-description">South Pacific Best Bitter</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bramling">
                <span class="each-brew-title">Bramling<span class="each-brew-description">English Hop Golden Ale</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew bullet">
                <span class="each-brew-title">Bullet<span class="each-brew-description">Original IPA</span></span>
                </div>
                <div class="each-brew-separator"></div>
                                        <div class="each-brew miami-weisse">
                <span class="each-brew-title">Miami Weisse<span class="each-brew-description">American Hopped Wheat Beer</span></span>
                </div>
                <div class="each-brew-separator"></div>
                    </div>
    </div>
            <div class="each-brew-content ale">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="ale-clip-01.png" class="attachment-brew-standard" alt="ale-clip-01" /></div>        </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area ale-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bramling">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="bramling.png" class="attachment-brew-standard" alt="bramling" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bramling-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content bullet">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="327" height="511" src="bullet.png" class="attachment-brew-standard" alt="bullet" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area bullet-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            </div>
        </div>
    </div>
            <div class="each-brew-content miami-weisse">
        <div class="three columns first-margin-offset">

                        <div class="each-brew-image"><img width="326" height="511" src="miami-weisse.png" class="attachment-brew-standard" alt="miami-weisse" /></div>      </div>
        <div class="three columns first-margin-offset">
            <div class="default-content-area content-area miami-weisse-content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
        </div>
    </div>
    </div>

Answer 1

This is what I ended up with - using @Iftah's code combined:

var lastClicked = null;
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit');
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()})  // hide the element in the animation on-complete callback
                  .css('position','relative'); 
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

Just need to delay the new item coming in...

Answer 2

1) Just loop it:

   var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {       
         $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000);
      }, function() {       
           $('.each-brew-content.'+animCls)
                  .animate({ left: '-100%' }, 1000, function() { $(this).hide()});  // hide the element in the animation on-complete callback  
      });
      })(animateClasses[i]);  //  self calling anonymous function
   }

2) keep a global variable holding the last clicked on div. Before overwriting it, if its not null do the return animation on it. eg:

var lastClicked = null;
var animateClasses = ['ale', 'brambling', 'bullet', 'miami-weisse'];
   for (var i=0; i<animateClasses.length; i++) {
      (function(animCls) { 
      $('.each-brew.'+animCls).toggle(function() {
    if (lastClicked && lastClicked != this) {
        // animate it back
        $(lastClicked).trigger('click');
    }
    lastClicked = this;
    // continue with handler as before