Change Accordion arrow position

Question

I am new to jquery Mobile. I created an Accordion, But I want the arrow on it to appear on Right side. Can anyone help me?

Below is my code.

<div class="accordion" id = "accordion">

</div>

CSS

body {
    background-color: #333333;
    .accordion h3 a {
        width:50%
    }
    .accordion h3 a .ui-icon {
        float:right
    }
}

Then i loaded my Accordion with arrays

for (i=0;i<names.length;i++)
  {               
      var newDiv = "<h3>"+names[i]+"</h3><p>"+subnames[i]+"</p>";
       $('.accordion').append(newDiv)
       $('.accordion').accordion("refresh");

}

Answer 1

In the jQuery Mobile collapsible widget, you can set data-iconpos="right" to move the icon to the right side:

    <div data-role="collapsibleset" data-theme="a" data-content-theme="a">
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 1</h3>

            <p>I'm the collapsible content for section 1</p>
        </div>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 2</h3>

            <p>I'm the collapsible content for section 2</p>
        </div>
        <div data-role="collapsible" data-iconpos="right">
             <h3>Section 3</h3>

            <p>I'm the collapsible content for section 3</p>
        </div>
    </div>

Here is a DEMO

For dynamically added content:

   var thedynamiccontent = '<div data-role="collapsible" data-iconpos="right"><h3>Another Section</h3><p>Hello from dynamic added section</p></div><div data-role="collapsible" data-iconpos="right"><h3>Another Section 2</h3><p>Hello from dynamic added section 2</p></div>'; 
   $("#accordion").append(thedynamiccontent).collapsibleset("refresh").enhanceWithin();

dynamic DEMO

NOTE: you can also change the icons used: data-collapsed-icon="arrow-r" data-expanded-icon="arrow-u"