获取JavaScript slideToggle以在打开另一个div时关闭活动div吗？

Question

Here's a demo of what I have so far: http://www.betafreshmedia.com/nathan/coffee.html

I know there are a lot of other questions like this, however, I cannot adapt their syntax to mine as everyone's is pretty different. Here's my jQuery:

$(".trigger").click(function() {
$(this).find('ul.coffeetype').slideToggle();
});

I want a minimal, straight-forward way to continue using the same class for each div and only allow one to be opened at a time. When you click on a div that's closed, I want the open one to slide out of sight and the new one to drop down in its respective position.

HTML:

<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>
<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>
<div class="trigger">
<img src="images/coffeetype1.png" />
<ul class="coffeetype">
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
    <li>International</li>
    <li>Regional</li>
</ul>
</div>

It's just the same thing three times in a row right now for demo purposes.

Answer 1

$(document).ready(function() {
    $(".trigger").click(function() {
        var $el = $(this).find('ul.coffeetype');
        var $opened = $('.toggledDown').not($el);
        $opened.toggleClass('toggledDown');
        $opened.slideToggle();
        $el.toggleClass('toggledDown');
        $el.slideToggle();
    });
});

Track the ones that are open and close them before you open the active one.

EDIT Added the ".not($el)" so you can still toggle the same menu up and down.

Answer 2

If my understanding is correct:-

JS

$(".trigger").hover(function() {
   $(this).find('.coffeetype').slideToggle();
});​

CSS

.coffeetype {
    display: none;
}​

Refer LIVE DEMO

Answer 3

Change your code to the following:

$(".trigger").click(function() {
    $('ul.coffeetype').slideUp();
    $(this).find('ul.coffeetype').slideToggle();
});​

This slides all open lists closed first.