title: How to get collapsible & expandable list for android without using jquery 1.0.1.css
body: <p>I want to get something like as shown in below<img src="https://i.stack.imgur.com/vezsz.png" alt="enter image description here"></p>
  
  <p>and the code i used for it is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  &lt;title&gt;
      &lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
      &lt;link rel="stylesheet" href="my.css" /&gt;
      &lt;style&gt;
          /* App custom styles */
      &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;
      &lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div data-role="collapsible" data-collapsed="true"&gt;
      &lt;h3&gt;Tasks Today&lt;/h3&gt;
      &lt;ul data-role="listview" data-divider-theme="b" data-inset="true"&gt;&lt;/ul&gt;
                      &lt;ul data-role="listview" data-divider-theme="b" data-inset="true"&gt;
                          &lt;li data-theme="c"&gt;
                              &lt;a href="#" data-transition="slide"&gt;
                                  list1
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li data-theme="c"&gt;
                              &lt;a href="#page1" data-transition="slide"&gt;
                                  list2
                              &lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li data-theme="c"&gt;
                              &lt;a href="#page1" data-transition="slide"&gt;
                                  list3
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;/div&gt;
  
  
             &lt;div data-role="collapsible" data-collapsed="true"&gt;
                      &lt;h3&gt;
                          Tasts This Week
                      &lt;/h3&gt;
                      &lt;ul data-role="listview" data-divider-theme="b" data-inset="true"&gt;
                       &lt;li data-theme="c"&gt;
                              &lt;a href="#" data-transition="slide"&gt;
                                  Button
                              &lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But i don't want to use the below css in my code as it is effecting my existing UI</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /&gt;
  </code></pre>
  
  <p>Can anyone help me in getting same output as i shown with out using this jquery css?</p>
  
  <p>I replaced my css with structure css and i'm getting the UI as shown
  <img src="https://i.stack.imgur.com/PvL4W.png" alt="enter image description here"></p>