jquery – 处理多个切换

我想要的很简单,我有三个链接：

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

和三个盒子：

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

你可能看到我正在尝试做什么.所有的盒子都是默认隐藏的,当我点击青铜时,它会向下滑动青铜,再次点击它会向上滑动,依此类推.我遇到的问题是所有三个盒子占据了页面上的相同空间,所以我一次只能打开一个盒子.所以我点击青铜,向下滑动青铜盒子,然后如果我点击银,它应该向上滑动,银色滑下来……

$('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();
        }
    );

我很难让转换工作,因为切换似乎不同步,有时我最终必须在它做任何事情之前点击链接两次.我也确定这是一个使用少量代码的解决方案.我确实尝试检测类并将其传递给一个通用函数来完成所有这些,但无法让它发挥作用.