accordion inside a accordion doesn't work to well, how come
Let the code explain it self
- <div id="accordion">
<h3><a href="#">First header</a></h3>
<div>
First content
<div id="accordion1">
<h3><a href="#">1st header(accordion1) inside accordion</a></h3>
<div>First content</div>
<h3><a href="#">2nd header(accordion1) inside accordion</a></h3>
<div>Second content</div>
</div>
</div>
<h3><a href="#">Second header</a></h3>
<div>
Second content
<div id="accordion2">
<h3><a href="#">1st header(accordion2) inside accordion</a></h3>
<div>First content. Only seen once at opening</div>
<h3><a href="#">2nd header(accordion2) inside accordion</a></h3>
<div>Second content. Never seen at all</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>