Link to open jQuery Accordion

Question

I'm trying to open an accordion div from an external link. I see the "navigation: true" option but I'm not sure how to implement it. Do you give each div an id and call the link like this? http://domain.com/link#anchorid

I'm new to jQuery so bear with me. Here is the code I'm using if it helps.

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", autoHeight: false, animated: false, navigation: true });
         });
    </script>
<div id="accordion">

<div>
    <h2><a href="#">Services</a></h2>
    <div class="services">
    <p>More information about all of these services</p>
    </div>
</div>

Answer 1

With a server-side language, check the query for that #anchor and use it to fill out the activation statement.

Extracted from something I was just working on:

$("#search_forms").accordion("activate", "{$this->open_form}");

Edit:

I can't link directly to the accordion method blurb, but this gets you close:

http://docs.jquery.com/UI/Accordion#methods

Answer 2

The navigation option isn't for panel activation. It's for telling the user where they are.

Using simplified html code:

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

You put the unique ID in the Hyperlink in the title

Then the jQuery (simplified):

<script type="text/javascript">
    $(function(){
        $("#accordion").accordion({ header: "h2", navigation: true });
     });
</script>

The "navigation : true" will enable you to go www.site.com/#about which makes the "about" panel selected. For activation, there are a couple of ways. Perhaps one way is to grab a query string and put it into the jQuery.

With C#

$("#accordion").accordion("activate", '<%= Request.QueryString["id"] %>');

With PHP

$("#accordion").accordion("activate", '<?php echo $_GET['id']; ?>');

Which will allow you to specify which panel to open by www.site.com?id=2

Answer 3

Hi folks

I am being incredibly dense, I am sure, but I cannot get the above to work. jQuery as follows:

jQuery().ready(function(){

    // first simple accordion with special markup
    jQuery('#list3').accordion({
        header: 'div.title',
        active: false,
        alwaysOpen: false,
        animated: false,
        autoheight: false

    });




});
 $(function(){
    $('#list3').accordion({ header: "h2", navigation: true });
 });

Extensions and conversions

One ball, 22 players. Lots of fun. Go to google?

domain.com/page.html#ext doesn't open the link.

ANy one help? (cannot get the htnl code to show properly)

Answer 4

Hah, cracked it.

Use the php get method. However there is an error in the one above. $("#accordion").accordion("activate", '');

the php code needs the quotation marks removed.

Works a treat now.

Cheers

Ian

Answer 5

I suppose the next question to ask on this matter would be:

How do you preserve the animation between elements when the page has to be refreshed to select the specified one?