Collapsible Same non-standard icon 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>Issue: Same non-standard icon</h1>
  </div><!-- /header -->

  <div data-role="content">  
    
    <p class="ui-bar ui-bar-d">Having different non-standard icons works, same does not:</p>
    
    <div data-role="collapsible" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
      <h3>I have different custom icons</h3>
      <p><code>data-collapsed-icon="arrow-r"</code> and <code>data-expanded-icon="arrow-d"</code></p>
    </div>

    <div data-role="collapsible" data-collapsed-icon="home" data-expanded-icon="home">
      <h3>I have same custom icon "home" - no css</h3>
      <p><code>data-collapsed-icon="home"</code> and <code>data-expanded-icon="home"</code> When I'm expanded, I get the "plus" icon, because I lose the ui-icon-x class</p>
    </div>
<hr>
   <p class="ui-bar ui-bar-c">The following collapsibles have css-rules for the expanded-icons:</p>
    <div data-role="collapsible" data-collapsed-icon="info" data-expanded-icon="info">
      <h3>I have same custom icon "info" + css</h3>
      <p><code>data-collapsed-icon="info"</code> and <code>data-expanded-icon="info"</code> but I have a custom css-rule</p>
    </div>
    
    <div data-role="collapsible" data-collapsed-icon="grid" data-expanded-icon="grid">
      <h3>I have also same custom icon but "grid" + css</h3>
      <p><code>data-collapsed-icon="grid"</code> and <code>data-expanded-icon="grid"</code> but I have also a custom css-rule</p>
    </div>
    
  </div><!-- /content -->

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

CSS

code { font-size: 16px }

div.ui-collapsible[data-collapsed-icon="info"]  span.ui-icon { background-position: -540px 50%; }
div.ui-collapsible[data-collapsed-icon="grid"] span.ui-icon { background-position: -432px 50%; }