1) I built a nested accordion using the dt (definition term) of a dd (definition list) as the header.
<dl class="accordion">
<dt>Term</dt>
<dd>Description
<dl class="accordion">
<dt>Term</dt>
<dd>Description</dd>
</dl>
</dd>
</dl>
$(".accordion").accordion({
header: "dt",
heightStyle: "content",
active: false,
collapsible: true
});
2) I found that clicking on the child (nested) accordion closed the parent, so I looked around for a fix and found
this jsfiddle:
<div class="accordion">
<h3>Home</h3>
<div class="accordion">
<h3>Sub-Div1</h3>
<div>
<p>This is a sub-div</p>
</div>
<h3>Sub-Div2</h3>
<div>
<p>This is a sub-div</p>
</div>
</div>
</div>
$(".accordion").accordion({
header: "> h3:not(.item)",
heightStyle: "content",
active: false,
collapsible: true
});
3) I adapted the jsfiddle jquery to my 'dt' selector:
$(".accordion").accordion({
header: "> dt:not(.item)",
collapsible: true,
heightStyle: "content"
});
And it worked!
But I can't figure out how it works. I'm especially perturbed by the '.item'. That looks like a class but the class isn't present in either the jsfiddle html or my html.
I tried taking '.item' out of the jquery on the jsfiddle and it completely broke the accordions.
I changed the '.item' to '.xxxxitem' and it worked again.
There was a difference when I tested taking out '.item' on my own web page - the accordions worked perfectly, so:
on JSfiddle these both worked:
header: "> h3:not(.item)"
header: "> h3:not(.xxxxxitem)"
but this didn't:
header: "> h3:not()"
whereas on my own web site all three options (substituting 'h3' with 'dt') worked.
Could anyone shed some light on this for me?
Chris