Разрешить только один div, видимый за раз, Jquery

Question

все!

У меня настроено статическое меню, и когда выбраны вкладки меню, под ним появляется еще один div с соответствующим содержимым.Однако проблема, с которой я столкнулся, заключается в том, что, хотя я могу заставить контент отображаться и переключаться нормально, я не могу заставить его отображать только один блок контента за раз.Меню просто открывает все больше и больше div.

Я хочу, чтобы это меню позволяло открывать только div одновременно.: (

Любая помощь очень ценится !! Спасибо большое, я чувствую, что уже давно нахожусь на грани исправления этого, но не совсем могу добраться.: (

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>
                   <span>Alberta</span>
                   <li style="padding-left:22px;"><a href="/Calgary" class="links">Calgary</a></li>
                </ul>
            </div>

Answer 1

Шаг 1. Добавьте класс ко всем вашим тегам DIV контейнера, что-то вроде class = "Province"

Шаг 2. Вы можете просто добавить следующее в ваш код клика

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

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

Answer 2

С данным кодом вы можете попробовать это:

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

});

Рабочий пример: http://jsfiddle.net/WGRvw/

Однако вы можете сделать обработчики более общими, как указано ниже:

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