Question

I am making my list divider collapsible.Initially list will be expanded but user can collapse it by clicking on the up arrow icon and also icon should change to down arrow. I am unable to change the icon here. Here is my code

<ul data-role="listview" class="selectHeader" id="bank_name" data-theme="d" data-divider- theme="d" data-filter="false" data-inset="false"  style="padding:0px;margin-top: 0px;margin-left: -5px">
   <li  data-role="list-divider" id="accountgrp">Account Groups

                 <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: left;">
                  <a  id="grp-check-all" data-role="button" data-theme="a" data-icon="check-all" data-inline="true" data-iconpos="notext">Check All</a>
                </div>
                 <div data-type="horizontal"  style="margin:-11px 10px -10px 0;display: inline;float: right;">

                  <a  id="grp-clear-all" data-role="button" data-theme="a" data-icon="clear-all" data-inline="true" data-iconpos="notext">Clear</a></div>

                 <div data-type="horizontal"  class="openclose" >

                  <a  id="updown" data-role="button" data-theme="a" data-icon='arrow-u' data-inline="true" data-iconpos="notext">updown</a></div>


                  </li>

          <li  class="filterselect accountgrp ui-icon-arrow-u" data-icon="false"  id="group1"  ><a href="#"  data-panel="main" data-transition="slide"> Group1 </a></li>
            <li class="filterselect accountgrp ui-icon-arrow-u" data-icon="false"  id="group2"><a href="#"  data-panel="main" data-transition="slide">Group2</a></li>
            <li class="filterselect accountgrp ui-icon-arrow-u" data-icon="false" ><a href="#bankdetail1" data-panel="main" data-transition="flip">Group3</a></li>

             <li data-role="list-divider">Bank Code
                  <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: left;">
                  <a  id="grp-check-all" data-role="button" data-theme="a" data-icon="check-all" data-inline="true" data-iconpos="notext">Check All</a>
                </div>
                 <div data-type="horizontal"  style="margin:-11px 30px -10px 0;display: inline;float: right;">

                  <a  id="grp-clear-all" data-role="button" data-theme="a" data-icon="clear-all" data-inline="true" data-iconpos="notext">Clear</a></div>

             </li>
             </ul>

CSS..

   .openclose{
       margin:-28px 25px -10px 0px;
       display: inline;float: right;    
     }

and jquery is here for first list divider only

$('#updown').live ("click", function (event)
{ 

var $span = $("ul.selectHeader").children(".accountgrp");

  if ($span.hasClass("ui-icon-arrow-u"))
{
    $(".accountgrp").hide();
    $span.removeClass ("ui-icon-arrow-u").addClass ("ui-icon-arrow-d");
    //$('#bank_name').listview('refresh');
}
else
{
    if ($span.hasClass ("ui-icon-arrow-d")) 
    {

        $(".accountgrp").show();
        $span.removeClass ("ui-icon-arrow-d").addClass ("ui-icon-arrow-u");
        //$('#bank_name').listview('refresh');


    }

}
    }) 

Answer 1

You can try to modify your code as following:

$('#updown').live ("click", function (event)
{ 
    var $span = $("ul.selectHeader").children(".accountgrp");
    if ($span.hasClass("ui-icon-arrow-u"))
    {
        $(".accountgrp").hide();
        $('.ui-icon-arrow-u').removeClass ("ui-icon-arrow-u").addClass ("ui-icon-arrow-d");
        //$('#bank_name').listview('refresh');
    }
    else
    {
        if ($span.hasClass ("ui-icon-arrow-d")) 
        {
            $(".accountgrp").show();
            $('.ui-icon-arrow-d').removeClass ("ui-icon-arrow-d").addClass ("ui-icon-arrow-u");
            //$('#bank_name').listview('refresh');
        }
    }
});