单击另一个时隐藏div

Question

I'm using javascript to show and hide 3 divs on my site, but unless the menu is clicked again the current div just stays open. I am trying to find out how to make one div close when another is opening. There are three divs in total. Here is my current javascript:

<script type="text/javascript">
$(document).ready(function () {
    $('#slide').click(function () {
        var hidden = $('.hidden');
        if (hidden.hasClass('visible')) {
            hidden.animate({
                "left": "-500px"
            }, "slow").removeClass('visible');
        } else {
            hidden.animate({
                "left": "0px"
            }, "slow").addClass('visible');
        }
    });
});
</script>

Any insight would be greatly appreciated!

Answer 1

I would do it something like this instead:

$(document).ready(function () {
    $('#slide').click(function () {
        var hidden = $('.hidden').not('.visible');
        var vis = $('.hidden.visible');
        vis.animate({
            "left": "-500px"
        }, "slow").removeClass('visible');
        hidden.animate({
            "left": "0px"
        }, "slow").addClass('visible');
    });
});