How you can use a Collapsible set with tabs in Jquery Mobile ?
On the left of my page I want a Collapsible set acting as a menu. Some items will have children and some not. I want the items without children to change the tab directly but the items with children should expand. (Then children in this case change the tabs)
I have an example at
-- dummy text to get jsfiddle link to submit ?
http://jsfiddle.net/7jg43uLg/3/
I can not get the header items without children to change tabs or not to expand. Also the tab content shows by default.
Is the a better way to achieve the result I want ?
Thanks for any help
You can build your menu as a listview such that items with no children are regular listitems and the ones with children are collapsibles within a list item:
<ul data-role="listview" id="menu">
<li><a href="#">Location</a></li>
<li><a href="#">Product</a></li>
<li>
<div data-role="collapsible">
<h4>Community Facilities</h4>
<p>
<ul data-role="listview" data-inset="false">
<li><a data-transition="pop" href="#cat">Cat</a></li>
<li><a data-transition="pop" href="#dog">Dog</a></li>
</ul>
</p>
</div>
</li>
</ul>
Then you can just override some of the default CSS to get rid of the extra padding and margins:
#menu >.ui-li-static {
padding: 0 !important;
border: 0;
}
#menu .ui-li-static .ui-collapsible {
margin: 0 !important;
border-radius: 0;
border: 0 !important;
}
#menu .ui-li-static .ui-collapsible-heading {
margin: 0 !important;
}
#menu .ui-li-static .ui-collapsible-content {
padding-top: 0;
padding-bottom: 0;
}