Link to open jQuery Accordion

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

Leave a Comment