Dear all,
I am having trouble setting up two independent accordions.
They should open / close independently and accordion2 should be nested in accordion1 (code see below)
What happends right now is that they are overlapping each other when opened and IE is even overwriting 'text below accordion 1'. This should not happen.
Any ideas what to improve?
Thanks a lot any help!
Cheers
<script type="text/javascript">
$(document).ready(function() {
$("#accordion1").accordion();
$("#accordion2").accordion();
$('#accordion1 .q1').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
$('#accordion2 .q2').click(function() {
$(this).next().toggle();
return false;
}).next().hide();
});
</script>
<style type="text/css">
#sub1 { height:100px; background: #FF0000;}
#sub2 { height:100px; background: #FF00FF;}
</style>
</HEAD>
<BODY>
<div id="accordion1">
<div>
<a class="q1" href="#">
accordion 1
</a>
<div id="sub1">
<div id="accordion2">
<div>
<a class="q2" href="#">
accordion 2
</a>
<div id="sub2">
222222222
</div>
</div>
</div>
text below accordion 2
</div>
</div>
</div>
text below accordion 1
</BODY>
</HTML>