problem with changing collapsible icons

problem with changing collapsible icons

I'm using jquery 1.8.3 and jquery Mobile 1.3.0 and i have a problem changing icons of collapsible button. i can do it only once :-/ after it's stuck to the second set of icons i assigned.

For example i have a collapsible set.
  1.  <div id="ui_form_pa" data-role="collapsible-set" data-inset="false">
  2.             <div data-role="collapsible" id="grp_newpa_cat" data-collapsed="false" data-collapsed-icon="circle-blank" data-expanded-icon="circle">
  3.  some wall of text....
  4.             </div>
  5. </div>
  6. <a data-role="button" href="#" id="btn_change">
  7.             Change  icons 1
  8. </a>
  9. <a data-role="button" href="#" id="btn_change2">
  10.             Change  icons 2
  11. </a>

then in javascript in the pageinit:

  1. $("#btn_change").click(function(){
  2.      $("#grp_newpa_cat").collapsible({ collapsedIcon: "ok-circle", expandedIcon: "ok-circle" });
  3. });
  4. $("#btn_change2").click(function(){
  5.      $("#grp_newpa_cat").collapsible({ collapsedIcon: "circle-blank", expandedIcon: "circle" });
  6. });


You can change icons only one time.

What am i doing wrong ?