demos/tizen-winsets/widgets/list/list-collapsible.html

   1 <div data-role="page" id="genlist-expandable" data-add-back-btn="true">
   2         <div data-role="header" data-position="fixed">
   3                 <h1>Collapsible list (JQM)</h1>
   4         </div>
   5         <div data-role="content">
   6                 <form>
   7                 <ul data-role="listview">
   8                         <div data-role="collapsible" data-inset="false">
   9                                 <li class="ui-li-dialogue">1line</li>
  10                                 <li class="ui-li-dialogue">exp1-sub 1</li>
  11                                 <li class="ui-li-dialogue">exp1-sub 2</li>
  12                                 <li class="ui-li-dialogue">exp1-sub 3</li>
  13                                 <li class="ui-li-dialogue">exp1-sub 4</li>
  14                                 <li class="ui-li-dialogue">exp1-sub 5</li>
  15                                 <div data-role="collapsible" data-inset="false">
  16                                         <li class="ui-li-dialogue">exp1-sub 2 (exp2)</li>
  17                                         <li class="ui-li-dialogue">exp2-sub 1</li>
  18                                         <li class="ui-li-dialogue">exp2-sub 2</li>
  19                                         <div data-role="collapsible" data-inset="false">
  20                                         <li class="ui-li-dialogue">exp2-sub 3</li>
  21                                         <li class="ui-li-dialogue">
  22                                                 <span class="ui-li-text-main">2line</span>
  23                                                 <span class="ui-li-text-sub">Subtext</span>
  24                                         </li>
  25                                         </div>
  26                                 </div>
  27                         </div>
  28                         <li class="ui-li-dialogue">level 1</li>
  29                         <li class="ui-li-dialogue" data-expandable="true" id="exp4">
  30                                 <span class="ui-li-text-main">2line-sub-main</span>
  31                                 <span class="ui-li-text-sub">Subtext</span>
  32                         </li>
  33                         <li class="ui-li-has-radio ui-li-dialogue" data-expandable="true" id="exp5">
  34                                 <form>
  35                                 <input type="radio" name="collapsible-radio" />
  36                                 <span class="ui-li-text-main">2line-radio1</span>
  37                                 <span class="ui-li-text-sub">Subtext</span>
  38                                 </form>
  39                         </li>
  40                         <li class="ui-li-dialogue" data-expandable="true" id="exp6">
  41                                 <span class="ui-li-color-bar" style="background-color:rgba(72, 136, 42, 1);"></span>
  42                                 <span class="ui-li-text-main">2line-colorbar3</span>
  43                                 <span class="ui-li-text-sub">Subtext</span>
  44 <!--                            <div data-role="button" data-inline="true" data-icon="call" data-style="circle"></div> -->
  45                                 <img src="thumbnail.jpg" class="ui-li-bigicon">
  46                         </li>
  47                 </ul>
  48                 </form>
  49         </div>
  50         <div data-role="footer">
  51         </div>
  52 </div>