Dynamically change color of jQuery Mobile collapsible

Question

I have a method used in an onclick handler, from within the content of a collapsible in jQuery Mobile.

The idea of this method is to access the collapsible and make the collapsible button green to mark it as ok, when viewing the collapsible set with all items collapsed.

No matter what i've tried i have had no success in this.

I have tried to add a custom theme file and call .attr("data-theme", "b") for instance, to no avail. I have also tried to add a custom class, that does not work.

The thing is, it is dynamic so when page is first switched to it does not have any custom styling. Only upon clicking an element in the content of collapsible X should X be turned to green backcolor.

When inspecting the element when run i can see that it appends the new attributes and/or correctly, but it does not render.

I tried calling .trigger("create") on the element as well after appending styles, to no avail.

Example of something i tried. The element is given an id of "Stop" + id when dynamically inserted into the set, i just use that to find the correct element to attempt to style. This works and i can see that it is appended to the correct element.

function markAsOk(id, index)
{


//Color the line green, use set id (computed, less costly than find by attribute value ,    switch to swatch B = green
$( "#Stop" + id ).attr("data-theme", "b");

$( "#Stop" + id ).attr("data-content-theme", "b");

//$( "#Stop" + id ).enhanceWithin(); */



$( "#Stop" + id ).trigger("create");

//Refresh main list
$( "#activestopslist" ).trigger("create");


}

above this the collapsible is declared dynamically as follows:

html += "<div data-role=\"collapsible\" id=\"Stop" + activeObj.id + "\" data-wonum =  
\"" + activeObj.id + "\" data-index = \"" + activeObj.index + "\">";

//Set content
html += "<h3>" + activeObj.name + "</h3>"; 

html += "<a href=# onclick=\"markAsOk(" + activeObj.id + "," + activeObj.index  + 
")\"><img src = \"resources/okicon.png\" /></a>  <img src=\"resources/failicon.png\">"; 

//Icons for buttons        
html += "<p>" + processInstructions(activeObj.instructions) + "</p>"; 




//End tag
html += "</div>";

Here you also see the onclick event, added to the ok button embedded in content...

I would need some suggestions, it seems.

Answer 1

If you are just trying to change the color of the collapsible header, you don't need a theme swatch. Instead create a CSS rule for the green coloring, e.g:

.greenCollHeader {
    background-color: #7FAF1B !important;
    text-shadow: #aaa 0 1px 0 !important;
}

Then on your image click, just add this class to the link with class .ui-collapsible-heading-toggle within the collapsible widget:

$("#Stop" + id).find(".ui-collapsible-heading-toggle").addClass("greenCollHeader");

DEMO