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 a开发者_如何学Cn 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>
The active
option is what you need:
activeType: Boolean or Integer
Default: 0Which panel is currently open.
Multiple types supported:
- Boolean: Setting
active
tofalse
will collapse all panels. This requires thecollapsible 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:
- They want panel indexes, not
id
attributes. - 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.
精彩评论