jquery mobile panel with collapsable options

by Donavon Lerman

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<!-- Home -->
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header"> 
    <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
    <a href="index.php"   data-icon="home" data-iconpos="left"   data-shadow="false" data-iconshadow="false">Home</a>
    <h3> App </h3>
  </div>  
  <div data-role="content">
    <p>Information</p>
  </div>


  <div data-role="panel" id="left-panel" data-theme="a">
    <ul data-role="listview" data-theme="a">
      <li role="heading" data-role="list-divider" data-theme="a">MENU</li>
      <li data-theme="a">
        <a href="information.php" data-transition="slide" data-native-menu = "false">Information</a>
      </li>
      
      <li>
        <a href="form1.php" data-transition="slide" data-native-menu = "false">Form 1</a>
      </li>
      
      <li>
        <a href="form2.php" data-transition="slide" data-native-menu = "false">Form 2</a>
      </li>
      
      <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a">   
        <h1 data-theme="a" style="margin:0;">Sub Menu</h1>
        <ul data-role="listview"  data-theme="a">                
            <li style="padding: 0px 15px 0px 25px;">
              <a href="" data-transition="slide" data-native-menu = "false">Sub Menu Option 1</a>
            </li>
            <li style="padding: 0px 15px 0px 25px;">
              <a href="" data-transition="slide" data-native-menu = "false">Sub Menu Option 2</a>
            </li>
            
           
        
          </ul>
      </div>
      
      <li>
        <a href="" data-transition="slide" data-native-menu = "false">Page 3</a>
      </li>
    </ul>


	
  </div></div>