Question

How do I get rid of the extra space between each collapsible below? (see image link below)
– I’m trying to save screen real estate and need them to be stacked on top of each other.

Note: Each of my collapsible’s (ex. Email, Une, Resold) are independent, and can be left opened or closed at will (Non-Accordion type).

https://dl.dropbox.com/u/58096637/jqm_collapsible2.jpg

Answer 1

Here’s an example for you:

This is jQuery code used:

// Remove space between collapsible elements
$('div[data-role="collapsible"]').addClass('new-class');
// Remove rounded corners
$('div[data-role="collapsible"] h3 a').removeClass('ui-corner-bottom ui-corner-top ui-btn-up-c').addClass('ui-btn-up-c-custom');
// Fix borders so collapsible elements can overlap properly
$('div:last-child[data-role="collapsible"] h3 a').addClass('ui-btn-up-c-custom-last');