I have a small problem with jQuery.

The situation:

I have a piece of jQuery code, where I toggle results.

JS Code:

//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
});

Now I want to open - toggle an item on anchor position from the URL like (.php#toggleItem2)

Question: How read toggleItem2 from URL and open exactly this section?

Additional:

HTML Code:

<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>

I hope the problem is clearly defined.

I have a small problem with jQuery.

The situation:

I have a piece of jQuery code, where I toggle results.

JS Code:

//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
});

Now I want to open - toggle an item on anchor position from the URL like (http://x./page.php#toggleItem2)

Question: How read toggleItem2 from URL and open exactly this section?

Additional:

HTML Code:

<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>

I hope the problem is clearly defined.

• javascript
• jquery
• toggle
• jquery-events

4 Answers 4

You should give your divs IDs according to the anchors, e.g.

<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>

You can get the document fragment from the location object:

document.location.hash

Then it is simply (assuming the other containers are all hidden):

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

Try jquery toggle itself

http://api.jquery./toggle/

This is held within the window.location.hash variable.

You can do something like this:

http://jsfiddle/b6Znw/

Javascript:

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