Here is the code I have for a functional parent/child accordion div setup:
<div class="accordion">
<h3>Part 1</h3>
<div class="accordion">
<h3>Sub-Div1</h3>
<div>
<p>This is a sub-div</p>
</div>
</div>
<h3>Part 2</h3>
<div>
<p>This is part 2</p>
</div>
</div>
And here is the accompanying script:
<script>
$(".accordion").accordion({
header: "> h3",
heightStyle: "content",
active: false,
collapsible: true
});
</script>
I'm looking to achieve the functionality where a child accordion closes when its parent is closed. For example, when the first option of the accordion is open and its child is open, clicking the second option should close the first one. However, if the first option is opened again, the child would also be closed.
Any insights on achieving this would be greatly appreciated.