Inconsistent result for jQuery mobile class ui-btn-active

Question

I get inconsistent styling results for my collapsible list view.

In it's initial state the collapsible is collapsed and the background is white as designed. In it's expanded state the background of the first element in the list (the heading which I just clicked) is supposed to change to deal.

This background change only works some of the time. Using a touch device sometimes the listview will expand and keep the white background. And when collapsing this listview that failed to change background will sometimes result in a listview that has teal background in its collapsed state.

I assume this is set in the class ui-btn-active:

.ui-btn-active {
   background-color: #00a99d;
   border-color: #005c56;
   color: #ffffff;
   text-shadow: 0 1px 0 #444444;
}

But why the inconsistency? Works 2 times out of 10.

Answer 1

Try using something like this

.ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle{
    background:red;
}
.ui-collapsible-heading-toggle{
    background:yellow;
}