Question

I’m creating an iPad app using Jquery Mobile, and would like to create a navigation bar using <div class="content-secondary">, and inside that navigation bar have expandible content

As it stands I can create a simple <li> based navigation inside the secondary div, but when I try to add expandible content, it does not render as expected – simply showing the expanded content without any header or way to collapse it. Have tried to create a JSFiddle to illustrate (Fiddle Link), but it seems that JSFiddle does not support secondary navigation panes, as no matter how much I expand the width it simply renders as continuous page content..

If you follow the Fiddle link above, you will see the navigation bar appended to the bottom of the main content. The collapsible content renders just fine. But if you construct a JQuery Mobile web page with the same code you will see the problem.

Some screen grabs below to highlight;

When screen is narrow – Nav bar follows after main body, collapse works just fine

When screen widened, Nav bar becomes active but collapsible content behaves like a list

Any advice or thoughts? Is this a known problem or a design feature?

Thanks

Answer 1

I presume you have used the CSS from the demo doc to create the primary secondary view, and thus have a file defining the behaviour of the two content blocks (there is no “content-secondary” in jquery.mobile-1.1.0.css). You will find a bit in the media queries like this:

/* fix up the collapsibles - expanded on desktop */
.content-secondary .ui-collapsible-heading {
    display: none;
}
.content-secondary .ui-collapsible-contain {
    margin:0;
}
.content-secondary .ui-collapsible-content {
    display: block;
    margin: 0;
    padding: 0;
}

This section hides the header (preventing you from collapsing it), and expands the collapsible content.

By including this section prior to the media segments, you override the normal “Collapsing” behaviour and force it to always be open. Likewise, by removing it from the media segments, you force it to collapse again, on all widths / orientations.

You will need to enable the “heading” to be able to see them, though (because by default it is hidden, and if its children are hidden, you can’t click on anything to show it. You do this by removing the segment;

.content-secondary .ui-collapsible-heading {
    display: none;
}

from all subsequent media enquiries