jQuery Mobile 1.4

Collapsible inside listview - margin inheritance fix.

by Omar X

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.css">
<script src="http://code.jquery.com/mobile/1.4.0-beta.1/jquery.mobile-1.4.0-beta.1.min.js"></script>
<div data-role="page" data-theme="a">
    <div data-role="header" data-position="fixed">
         <h3>header</h3>

    </div>
    <div data-role="content" id="div"></div>
</div>

CSS

/*
CSS to fix collapsible style
as it inherits margins from
parent <li>
*/
li .ui-collapsible-heading, .ui-collapsible-heading-toggle {
    margin: 0 !important;
}
li .ui-collapsible-heading-collapsed .ui-collapsible-heading-toggle {
    margin-bottom: 1px !important;
}

JavaScript

function parseData() {

    var data = {
        0: {
            "title": "jQuery Mobile",
                "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        1: {
            "title": "Version 1.4 Beta 1",
                "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        2: {
            "title": "Collapisbles",
                "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
    };

    var html = '<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">';
    $.each(data, function (index, value) {
        console.log(value.title);
        html += '<li>' +
            '<div data-role="collapsible">' +
            '<h4>' + value.title + '</h4>' +
            '<p>' + value.content + '</p>' +
            '<a href="#" class="ui-btn ui-btn-inline">button</a>' +
            '</div>' +
            '</li>';
    });
    html += '</ul>';
    return html;
}


var div = $('#div');
div.html(parseData());
div.enhanceWithin();