Better Way to Code Hidden Div Toggle in JQuery?
<p>I've finally found a way to get this to work but the code it a bit long winded and I'm sure there is a better way of doing it. This is does what I want but I want to extend this to work on 10 or so divs and the code would be ridiculous if I used this method. I've tried playing around with the .each() method but it just leads to further frustration. If anyone could point me in the right direction I'd be much obliged. Here is a jFiddle of what I have so far: <a href="http://jsfiddle.net/QbsbD/47/" rel="nofollow">http://jsfiddle.net/QbsbD/47/</a></p>

<pre><code>$(document).ready(function() {
    $('#btn1').click(function() {
        if ('#div2:visible') {
            $('#div2').hide('fast');
        }
        if ('#div3:visible') {
            $('#div3').hide('fast');
        }
        $('#div1').slideToggle("slow");
    });
    $('#btn2').click(function() {
        if ('#div1:visible') {
            $('#div1').hide('slow');
        }
        if ('#div3:visible') {
            $('#div3').hide('slow');
        }
        $('#div2').slideToggle("slow");
    });
    $('#btn3').click(function() {
        if ('#div1:visible') {
            $('#div1').slideUp('slow');
        }
        if ('#div2:visible') {
            $('#div2').slideUp('slow');
        }
        $('#div3').slideToggle("slow");
    });
});​
</code></pre>
