I am trying to nest an accordion inside an accordion. The accordions
are working, however the inside accordions take on the selected header
of the parent. This is easy to see if you use a theme with a down and
right arrow. When the parent accordion is opened, its header becomes
selected (down arrow), and both of its children accordion's headers
also become selected (down arrow). The child accordion work correctly
in that they only shows their contents when clicked. However both of
their headers are displayed in the selected mode(down arrow). When I
click the parent to close it, while the parent content is closing, I
can see that the children accordions have changed to the not selected
(right arrow) heading. Do you have any suggestions for how I can fix
this?
Thanks.
Mark
Code:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#acc1").accordion({
alwaysOpen: false,
active: false,
autoheight: false,
header: 'h3.ui-accordion-header',
clearStyle: true
});
$("#acc2").accordion({
alwaysOpen: false,
active: false,
autoheight: false,
header: 'h4.ui-accordion2-header',
clearStyle: true
});
});
</script>
</head>
<body>
<div id="acc1">
<div class="ui-accordion-group">
<h3 class="ui-accordion-header"><a href="#">Test
1</a></h3>
<div class="ui-accordion-content">
<div id="acc2">
<div class="ui-accordion2-group">
<h4
class="ui-accordion2-header"><a href="#">Test 1a</a></h4>
<div
class="ui-accordion2-content">
<p>Inner accordian 1a
elit, sed do eiusmod tempor incididunt .</
p>
</div>
</div>
<div class="ui-accordion2-group">
<h4
class="ui-accordion2-header"><a href="#">Test 1b</a></h4>
<div
class="ui-accordion2-content">
<p>Inner accordian 1b
m, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo con.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
