Response title
This is preview!
Nested collapsibles don't work inside collapsible set
in jQuery Mobile
•
11 years ago
I've some nested collapsible divs wrapped in collapsible-set div. If I click on the nested header, it won't expand the content instead it will collapse everything. If the collapsible-set div is taken out, the nested items function as expected, but I lose the functionality of the collapsible-set. See code below. Any ideas how to fix this?
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
</div>
</div>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<div data-role="collapsible" data-collapsed="true">
<h3>I'm a header</h3>
<p>I'm the collapsible content.</p>
</div>
</div>
</div>
</div>
6