Question

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 common function to do all this, but couldn’t get it to play.

Answer 1

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?