jQuery Mobile: change/switch theme on listview data-split-icon

Question

I have split listview (with collapsible set) in jQuery Mobile (jQm). You can see it here on JSfiddle.

I want the split icon act as checkbox. The icon has default data-theme="c" so it is grey and I want to change the data-theme to b on click, so the icon color should change to blue.

I tried different solutions to change data-theme and found several more or less (more the less) working solution. The best is simple jQm code $(this).buttonMarkup({theme: 'b'});, but, changing data theme this way dont change color of icon, but only change color of its background, as you can try in mentioned JSfiddle.

Normaly data-theme on split listview, will only affect icon, but when it is changed this way, it affects icons background. I want to change only icon, not its background and I cannot find way to do that. Probably wrong selector or some kind of bug.

What do you think?

Answer 1

Add the below to your code.

Demo

$(this).find('span.ui-btn').buttonMarkup({
   theme: 'b'
});

and

$(this).find('span.ui-btn').buttonMarkup({
   theme: 'c'
});

As span.ui-btn holds the icon and its' style.