CODEWITHSUNDEEP
jqueryjquery-uiaccordion
Ed Fearon
Ed Fearon

Reputation: 93

Activating a different section of a JQuery Accordion

I'd really appreciate any help with this problem.

This is a much simplified version of a longer set of php code, but it still has the problem, so I've ruled out the rest as the cause.

The accordion is being created in the of the main page. The HTML that follows is generated by an included php file.

The accordion works perfectly, the only problem is that sometimes I will want to load the second section (Section W) instead of the first (Section R) as is the default behaviour. I've tried several solutions that I have found online, but none of the ones below work. Any help would be greatly appreciated.

Code: http://pastebin.com/WQfctKVx

<script type='text/javascript'>
    $(function() {
        $( "#k_accordion" ).accordion({
            autoHeight: false,
            navigation: true
        });
    });
</script>

<div id="k_accordion">
    <h3 id="sectionR"><a href="#sectionR">Section R</a></h3>
    <div>
        Content for Section R
    </div>

    <h3 id="sectionW"><a href="#sectionW">Section W</a></h3>
    <div>
        Content for Section W
    </div>

    <script language=javascript> $( "#k_accordion" ).accordion( "activate", 2);</script>
    <script language=javascript>// Gives 'is not a function' error:     $("#k_accordion").activate(2); </script>
    <script language=javascript>// $( "#k_accordion" ).accordion( "activate", "sectionW");</script>
    <script language=javascript>// $( "#k_accordion" ).accordion( "activate", "#k_accordion > div:has(#sectionW) > h3"); </script>
    <script language=javascript>// $( "#k_accordion" ).accordion( "activate", $("#h3-sectionW")); </script>
</div>

Upvotes: 2

Views: 2888

Answers (1)

mu is too short
mu is too short

Reputation: 434685

The active option is what you need:

activeType: Boolean or Integer
Default: 0

Which panel is currently open.

Multiple types supported:

  • Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
  • Integer: The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.

If you want the second panel open (for example), then set active: 1 when creating the accordion:

$( "#k_accordion" ).accordion({
    autoHeight: false,
    navigation: true,
    active: 1
});

Or you can use the option method to change the open panel after the accordion is created:

$('#k_accordion').accordion('option', 'active', 1);

Or you can use the activate method:

$("#k_accordion").accordion('activate', 1);

Just remember two things when using the active option or the activate method:

  1. They want panel indexes, not id attributes.
  2. The indexes are zero-based (just like JavaScript arrays) so the second panel has an index of 1 rather than the 2 that you were trying to use.

Upvotes: 5

Related Questions