This makes no sense, true. I’m trying to use a simple collapsible set and just un-style it and change the color on links etc. First task – change the icon and move it to the right instead of left. I’m trying to use data-iconpos="right" in the same manner I used data-collapsed="true" but it doesn’t seem to work. None of the prescribed jQuery data- functions like that seem to work, like the theme change, not a,b or c. What am I missing here? This should be super easy according to the docs!
Live view: https://www.ubat.com/mobile/test.html
Page code:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="css/jquery-1.5.min.js" type="text/javascript"></script>
<script src="css/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//use.typekit.net/kxv5fxv.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Hello world</p>
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true" data-iconpos="right">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>
You are using a very outdated (alpha!) version of jQuery Mobile. The latest one is 1.2.0 and collapsible sets with custom icon position did not come until version 1.1.0
Please upgrade both, jQuery and jQuery Mobile versions for your code to work.