Accordion - open to item
Accordion - open to item
I'm trying to get the Accordion to open to a particular item when
loaded. I think the activate method should do this but I can't get it
to work. I created a test page and the item I'm trying to get it to
open to is in the 2nd section, the 2nd item from the bottom. The page
is at http://www.ofthejungle.com/testaccordion.php -- can anyone see
what I'm doing wrong?
Not sure if I can paste the page source but here goes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/
jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css"
media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/
jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
collapsible: true
});
});
$(document).ready(function() {
$('#accordion').accordion('activate','#anchor2_17');
//$("#accordion").accordion('activate', 11 );
//$('#accordion').accordion('activate', '#accordion > div:has
(#anchor2_17) > h3');
});
</script>
</head><body>
<div class="demo" style="height:500px; width:500px">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div style="height:100px">
<a id="anchor1_1" href="1_1.html">num1</a> <br/>
<a id="anchor1_2" href="1_2.html">num1</a> <br/>
<a id="anchor1_3" href="1_3.html">num1</a> <br/>
</div>
<h3><a href="#">Section 2</a></h3>
<div style="height:100px">
<a id="anchor2_1" href="2_1.html">num1</a> <br/>
<a id="anchor2_2" href="2_2.html">num1</a> <br/>
<a id="anchor2_3" href="2_3.html">num1</a> <br/>
<a id="anchor2_4" href="2_3.html">num1</a> <br/>
<a id="anchor2_5" href="2_3.html">num1</a> <br/>
<a id="anchor2_6" href="2_3.html">num1</a> <br/>
<a id="anchor2_7" href="2_3.html">num1</a> <br/>
<a id="anchor2_8" href="2_3.html">num1</a> <br/>
<a id="anchor2_9" href="2_3.html">num1</a> <br/>
<a id="anchor2_10" href="2_3.html">num1</a> <br/>
<a id="anchor2_11" href="2_3.html">num1</a> <br/>
<a id="anchor2_12" href="2_3.html">num1</a> <br/>
<a id="anchor2_13" href="2_3.html">num1</a> <br/>
<a id="anchor2_14" href="2_3.html">num1</a> <br/>
<a id="anchor2_15" href="2_3.html">num1</a> <br/>
<a id="anchor2_16" href="2_3.html">num1</a> <br/>
<a id="anchor2_17" href="2_3.html">num1</a> <br/>
<a id="anchor2_18" href="2_3.html">num1</a> <br/>
</div>
<h3><a href="#">Section 3</a></h3>
<div style="height:100px">
<a id="anchor3_1" href="3_1.html">num1</a> <br/>
<a id="anchor3_2" href="3_2.html">num1</a> <br/>
<a id="anchor3_3" href="3_3.html">num1</a> <br/>
</div>
</div>
</div>
</body></html>
--