Jquery mobile tabs and collapsible

Question

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

Answer 1

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;
}

DEMO

Answer 2

ezanker answer was almost there. I just could not get the sublists to work with tabs though.

In the end I rolled my own solution without tabs.

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/