Accoridion - Nested Example by joern zaefferer
Hi,
Hoping someone can point out what I might be doing wrong but using the
nested.html example as a base from:
http://dev.jquery.com/browser/trunk/plugins/accordion/demo/nested.html
All works well with the nested example provided but if I try and
duplicate the nested accordions under "1b" and run the page, all
nested accordions under "1b" option appear expanded, which is not what
I am after. I was hoping that it would follow the same functionality
as when you click on option "1a".
Can anyone please assist as I am trying to get this working - thanks?
My code is as follows - pls note that I am referencing all required
jQuery js libraries and do not appear in my code here:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Nested Accordions</title>
<link type="text/css" rel="stylesheet" href="C:\jQueryLibs
\jquery.accordion_2\jquery-accordion\demo\css\flora.accordion.css" />
<script type="text/javascript">
jQuery().ready(function() {
jQuery("#acc1").accordion({
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
jQuery('#acc1').accordion("activate",false);
jQuery("#acc2").accordion({
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
jQuery('#acc2').accordion("activate",false);
});
</script>
</head>
<body>
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span></a>
<div>
<ul id="acc2" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span></a>
<div>
2a<br />
2a<br />
2a<br />
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span></a>
<div>
2b<br />
2b<br />
2b<br />
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2c
<span class="ui-accordion-right"></span></a>
<div>
2c<br />
2c<br />
2c<br />
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span></a>
<div>
<ul id="acc2" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span></a>
<div>
2a<br />
2a<br />
2a<br />
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span></a>
<div>
2b<br />
2b<br />
2b<br />
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2c
<span class="ui-accordion-right"></span></a>
<div>
2c<br />
2c<br />
2c<br />
</div>
</li>
</ul>
</div>
</li>
</ul>
</body>
</html>