Dealing with multiple toggles

I'm stuck in a toggle() nightmare, and am finally asking for help.

What I want is pretty simple, I have three links:

a.showcountries.bronze
a.showcountries.silver
a.showcountries.gold

and three boxes:

.countries.bronze
.countries.silver
.countries.gold

You can probably aready see what I'm trying to do. All boxes are hidden buy default, when I click bronze it slides bronze down, click it again it slides up, and so on. The problem I'm having is that all three boxes occupy the same space on the page, so I can only have one box open at any one time. So I click bronze, down slides the bronze box, and if I then click silver it should slide back up and the silver one slides down...

$('a.showcountries.bronze').toggle(
        function(){
            $('.countries.silver, .countries.gold').slideUp();
            $('.countries.bronze').slideDown();
        },
        function(){
            $('.countries.bronze').slideUp();
        }
    );
    $('a.showcountries.silver').toggle(
        function(){
            $('.countries.bronze, .countries.gold').slideUp();
            $('.countries.silver').slideDown();
        },
        function(){
            $('.countries.silver').slideUp();
        }
    );
    $('a.showcountries.gold').toggle(
        function(){
            $('.countries.silver, .countries.bronze').slideUp();
            $('.countries.gold').slideDown();
        },
        function(){
            $('.countries.gold').slideUp();
        }
    );  

I'm struggling to get the transitions to work, as the toggles appear to go out of sync and sometimes I end up having to click a link twice before it does anything. I'm also sure theres a solution that uses a LOT less code. I did try detecting the class and pass it to a com开发者_JAVA技巧mon function to do all this, but couldn't get it to play.

toggle() as an event remembers the previous click and runs the alternate function on the next one. You're better off using a single click event and checking visibility. Something like this might work better for you:

$(".showcountries").click(function () {
    var cls = this.className.match(/gold|silver|bronze/),
        box = $(".countries."+cls[0]);

    // slideUp() on all .countries elements
    $(".countries").not(box).slideUp();

    box.slideToggle();
});

Working demo: http://jsfiddle.net/kSrvZ/1 (thanks to YiJiang for suggesting slideToggle() on chat).

I've made a jsFiddle that should get you close.

Check it here

It's based on a click event, and you use the id to check which div you want to show, and close that one if it is already open. Can you get your html/css/js setup this way?

Unless I've got the wrong end of the stick, I don't think toggle does what you think it does. You should be using the click event for this, and I'd also use an ID rather than a class for your links. Something like this should work (untested):

$('a.showcountries').click(function()
{
    var class = $(this).attr('id');
    $('.countries').not('.' + class).slideUp();
    $('.countries').filter('.' + class).slideDown();
});

Edit: I stand corrected! You learn something every day :)