I want to get something like as shown in below
and the code i used for it is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<style>
/* App custom styles */
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
</head>
<body>
<div data-role="collapsible" data-collapsed="true">
<h3>Tasks Today</h3>
<ul data-role="listview" data-divider-theme="b" data-inset="true"></ul>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a href="#" data-transition="slide">
list1
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
list2
</a>
</li>
<li data-theme="c">
<a href="#page1" data-transition="slide">
list3
</a>
</li>
</ul>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>
Tasts This Week
</h3>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-theme="c">
<a href="#" data-transition="slide">
Button
</a>
</li>
</ul>
</div>
</body>
</html>
But i don’t want to use the below css in my code as it is effecting my existing UI
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
Can anyone help me in getting same output as i shown with out using this jquery css?
I replaced my css with structure css and i’m getting the UI as shown
Check this fiddle. In basically includes the collapsible, listview and theme css from git repository https://github.com/jquery/jquery-mobile/tree/master/css
http://jsfiddle.net/dhavaln/UCDfU/