Is It Possible To Have Collapsible Content Inside A Secondary Div Class With Jquery Mobile?

Question

I'm creating an iPad app using Jquery Mobile, and would like to create a navigation bar using

, and inside that navigation bar have expandible

Solution 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

Solution 2:

Listview does a -15px margin all around. I would suggest you either override this css with your own style sheet placed after JQM's and use this snippet:

Baca Juga

.ui-content.ui-listview{margin:-15px -15px0 -15px;}

or use an inset list since it doesn't use the -15px margin like so:

<uldata-role="listview"data-theme="c"data-dividertheme="d"data-inset="true"><li><ahref="#Link1">Link1</a></li><li><ahref="#Link2">Link2</a></li><li><ahref="#Link3">Link3</a></li></ul>

I hope that helps. Let me know if there is any way I can improve this answer for you.

Solution 3:

Many thanks to AssidiousBlue. Had the same problem, and fixed it by commenting out the whole section:

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

Cheers, Alexx

Html5 Website

Is It Possible To Have Collapsible Content Inside A Secondary Div Class With Jquery Mobile?

Solution 1:

Solution 2:

Solution 3:

Post a Comment for "Is It Possible To Have Collapsible Content Inside A Secondary Div Class With Jquery Mobile?"