Home/ Questions/Q 7951407
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T02:33:03+00:00

I’m working with jQuery Mobile for the first time and I’m having trouble accomplishing

  • 0

I’m working with jQuery Mobile for the first time and I’m having trouble accomplishing what seems like a simple change to the icons on a collapsible set (accordion).

I want to change the icon for each of the headings on a collapsible set to an up arrow for the expanded state and a down arrow for the collapsed state.

I’ve created a Fiddle that seems to have the same problem with code that I pretty much copied directly from the jQuery mobile site and modified a little.

Any help or pointers on this would be much appreciated. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The docs page you refered actually uses the latest Work in Progress version of jquery mobile.So this is a feature we can expect in future versions of JQM.In the current stable version,we will not be able to change the icon by means of specifying a data attribute.

    Here is an eg: which uses the Work in Progress version of jqm – http://jsfiddle.net/AAYjF/

    But it is advisable to use the stable version.So you can use the following code to acheive this:

    <!DOCTYPE html>
<html>
    <head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <style>
        .ui-collapsible .ui-icon{
            background-position: -180px 50%;/*Position of up icon in icon sprite*/
        }

        .ui-collapsible-collapsed .ui-icon{
            background-position: -216px 50%;/*Position of down icon in icon sprite*/
        }

    </style>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div data-role="collapsible-set">

    <div data-role="collapsible">
    <h3>Section 1</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

    <div data-role="collapsible" >
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>

</div>
    </div><!-- /content -->

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

</body>
</html>

    The logic is to use the background position of the down and up icons in the icon sprite for the collapsed and expanded icons

    Demo : http://jsfiddle.net/6x8ew/

    • 0