Как переключить (jquery) с помощью якоря

Question

У меня небольшая проблема с jquery.

Ситуация:

У меня есть фрагмент кода JQuery, где я переключаю результаты.

JS код:

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return true; //Prevent the browser jump to the link anchor
});

Теперь я хочу открыть - переключить элемент в позиции привязки с URL-адреса, например (http://x.com/page.php#toggleItem2)

Вопрос: Как прочитать toggleItem2 из URL и открыть именно этот раздел?

Дополнительно:

HTML код:

<div class="container">
    <h2 class="acc_trigger"><a href="#toggle1">Item1</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 1
        </div>
    </div>

    <h2 class="acc_trigger"><a href="#toggle2">Item2</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 2
        </div>
    </div>


    <h2 class="acc_trigger"><a href="#toggle3">Item3</a></h2>
    <div class="acc_container">
        <div class="block">
            Inner Text in toggle 3
        </div>
    </div>

</div>

Надеюсь, проблема ясна.

Заранее спасибо.

Answer 1

Вы должны указать свои div идентификаторы в соответствии с привязками, например,

<h2 class="acc_trigger"><a href="#toggle1">Item1</a></h2>
<div id="toggle1" class="acc_container">
    <div class="block">
        Inner Text in toggle 1
    </div>
</div>

Фрагмент документа можно получить из объекта location:

document.location.hash

Тогда это просто (при условии, что все остальные контейнеры скрыты):

$(document.location.hash).slideDown().prev().addClass('active');

Answer 2

Попробуйте переключить jquery

http://api.jquery.com/toggle/

Answer 3

Вы можете сделать что-то вроде этого:

http://jsfiddle.net/b6Znw/

Javascript:

$().ready(function(){
    $('.acc_trigger a').click(function(){
        $(this).closest('.acc_trigger').next('.acc_container').toggle()
        return false;   
    })
})

Answer 4

Содержится в переменной window.location.hash.