Link to open jQuery Accordion

10

votes

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>

jqueryaccordion

13

votes

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

5

votes

The navigation option which many of these answers refer to was deprecated in jQuery UI 1.9 and removed in 1.10. The reason given was:

This functionality was disabled by default and is only one of many ways that you might want to determine which panel to activate on initialization. As such, we've deprecated this in favor of just handling the logic outside of accordion and setting the active option appropriately.

So coders using the newer versions of jQuery UI will need to write their own code to handle this feature.

For my site, I accomplished this with a JavaScript switch statement just before the </body> tag. (I'm not an experienced coder, so others should feel free to improve this answer.)

<script>
function switchToPanel(panel){
    var index = -1;
    switch (panel) {
        case "preschool":
            index = 0;
            break;
        case "kindergarten":
            index = 1;
            break;
        case "1st":
            index = 2;
            break;
        default:
            console.warn("Cannot switch to panel " + panel);
    }
    jQuery('#mathAccordion').accordion({active: index});
}

jQuery().ready(function() {
    if (window.location.hash) { //window.location.hash gets the anchor location out of the URL
        var target = window.location.hash.replace('#', ''); //remove the #
        switchToPanel(target);
    }
});
</script>

Here's the corresponding HTML:

<div class="accordion" id="mathAccordion">
    <h1>Preschool</h1>
    <div class="accordionFold">Preschool content</div>
    <h1>Kindergarten</h1>
    <div class="accordionFold">Kindergarten content</div>
    <h1>1st Grade</h1>
    <div class="accordionFold">First grade content</div>
</div>

2

votes

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

1

votes

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

1

votes

This worked for me...

var hash = window.location.hash;
$("#accordion").accordion("activate", hash);

1

votes

This worked for me.

<script>
$(function() {
    $( "#accordion" ).accordion({
        active: false,
        collapsible: true,
        heightStyle: "content",
        navigation: true,
        header: ".menuitem"
     });

    var hash = window.location.hash;
    var anchor = $('a[href$="'+hash+'"]');
    if (anchor.length > 0){
        anchor.click();
    }
});
</script>

and the html...

<div id="accordion">
        <h3 class="menuitem"><a href="#tab1">Tab1</a></h3>
        <div>
            More data....
        </div>
</div>

0

votes

$("a").click(function(event){
    var hash = window.location.hash;
    $("#accordion").accordion("activate", hash);
});

this works with jquery 1.8.3 and jqueryui 1.9.1 but didnt seem to work with jqueryui 1.10.0

not sure why...

Link to open jQuery Accordion

7 Answers