Only allow one div visible at a time, Jquery

all!

I have a static menu set up, and when the menu tabs are selected, another div appears below it with related content. However, the problem I'm having is that while I can get the content to show and toggle fine, I can't get this to display only one block of content at a time. The menu just opens up more and more divs.

What I want to do is have this menu only allow on div to be open at a time. :(

Any help is greatly appreciated!! Thank you so much, I feel like I've been on the verge of fixing this for a while now, but can't quite get there. :(

Jquery

$(document).ready(function () {
    $('#BC').hide();
    $('#BC-show').click(function () {
        $('#BC').toggle('slow');
        return false;
    });
    $('#AB').hide();
    $('#AB-show').click(function () {
        $('#AB').toggle('slow');
        return false;
    });

HTML

 <li><a href="" id="BC-show" class="prov">BC</a></li>
 <li><a href="" id="AB-show" class="prov">AB</a></li>

<div class='clearfix' id='BC' style="padding-bottom:5px;"><br />
                <ul>
                   <span>British Columbia</span>
                   <li style="padding-left:22px;"><a href="/Vancouver">Vancouver</a></li>
                </ul>
            </div>
            <div class='clearfix' id='AB'><br />
                <ul开发者_StackOverflow社区>
                   <span>Alberta</span>
                   <li style="padding-left:22px;"><a href="/Calgary" class="links">Calgary</a></li>
                </ul>
            </div>

With the given code you can try this:

$(function(){
    $(document).ready(function () {
        $(".prov").click(function(){
            $(".clearfix").hide();
        });

        $('#BC').hide();
        $('#BC-show').click(function () {
                $('#BC').toggle('slow');
                return false;
        });
        $('#AB').hide();
        $('#AB-show').click(function () {
                $('#AB').toggle('slow');
                return false;
        });
    });

});

Working example: http://jsfiddle.net/WGRvw/

However, you can make the handlers more generic as given below:

$(function(){
    $(document).ready(function () {
        $('.clearfix').hide();
        $(".prov").click(function(){
            var tgtId = this.id.replace("-show");
            $(".clearfix").hide();
            $("#" + tgtId).toggle('slow');
            return false;
        });
    });
});

Step 1. Add a class to all of your container DIV tags, something like class="province"

Step 2. You can just add the following to your click code

$(".province").click(function () { });

$('#BC-show').click(function () {
    // ---- HIDE ALL OTHER DIVS ----        
    $(".province").hide();
    // ---- END HIDE ----
    $('#BC').toggle('slow');
    return false;
});