Collapsible CSS headers mobile

by manoj

HTML

<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
<script src="http://code.jquery.com/jquery-1.7.2.js"></script> 
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 
</head>
<body>
    
 <div data-role="page" id="page1" data-theme="a">

  <div data-role="header">
    <h1>Collapsible CSS headers</h1>
  </div><!-- /header -->

  <div data-role="content">  
    
    <p class="ui-bar ui-bar-d ui-corner-all">Collapsibles with CSS headers for expanded/collapsed state:</p>

    <div data-role="collapsible" data-collapsed-icon="grid" data-expanded-icon="check" data-content-theme="a">
      <h3></h3>
      <p class="ui-bar ui-bar-e ui-corner-top">My collapsed / expanded header is CSS driven !</p>
      <p class="ui-bar ui-bar-d ui-corner-bottom" style="text-align: center; background: #fff;">
        <img src="http://www.coolstore888.com/communities/2/004/007/974/212/images/4551274753.jpg" style="width:80%; margin-top: 1em;" />
        </p>
    </div>
    
  </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

CSS

div.ui-collapsible:not([class~="ui-collapsible-collapsed"]) span.ui-btn-text:before { content: "Now I'm expanded :-)"; }

div.ui-collapsible span.ui-btn-text:before{ content: "I'm collapsed and I have a CSS header"; }