jQm - Collapsible list inside a listview

by Dragan Gaić

HTML

<div data-role="content" style="text-align:center">
			<ul data-role="listview" data-count-theme="c" data-inset="true">
				<li class="custom-li">
					<div data-role="collapsible" class="custom-collapsible">
						<h4>Heading</h4>
						<ul data-role="listview">
							<li><a href="#">List item 1</a></li>
							<li><a href="#">List item 2</a></li>
							<li><a href="#">List item 3</a></li>
						</ul>
					</div>
				</li>
				<li class="custom-bottom-li"><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
				<li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
				<li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
				<li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
			</ul>
		</div>

CSS

.custom-li {
    padding: 0 !important;
    border-width:0 !important;
}

.custom-bottom-li {
    border-top-width: 0 !important;  
}

.custom-collapsible {
    margin: 0 !important;   
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-width:0 !important;
}