Question

I need to do is when 2 textboxes are having text.. to make collapsible header color green..
I know how to do the first part.. but how to change collapsible header color i don’t know…

http://jquerymobile.com/test/docs/content/content-themes.html

here is written that you can customize it with custom css… i tried but this didn’t help..
here is the code of creation

        var collDiv = '<div class="added"  data-role="collapsible" data-collapsed="true"><h3 style="background: rgba(204,244,204,0.9);" id="results-header">'
                + hoursFrom + ":" + minsFrom
                + " - "
                + hoursTo + ":" + minsTo + '</h3>' + textProjectName + textProjectData + '</div>';
            $('.spanTimetable').append(collDiv);

Answer 1

Docs:

• http://jquerymobile.com/demos/1.0b1/docs/content/content-themes.html

Theming collapsible blocks

To set the color of the collapsible header, add the data-theme attribute to the collapsible container. The icon and body are not currently themable through data attributes, but can be styled directly with custom css.

<div data-role="collapsible" data-collapsed="true" data-theme="a">

Try something like this:

var collDiv = '<div class="added"  data-role="collapsible" data-collapsed="true" data-theme="f"><h3 style="background: rgba(204,244,204,0.9);" id="results-header">'
                + hoursFrom + ":" + minsFrom
                + " - "
                + hoursTo + ":" + minsTo + '</h3>' + textProjectName + textProjectData + '</div>';
            $('.spanTimetable').append(collDiv);

UPDATE:

A new ThemeRoller tool will launched with the jQuery Mobile 1.0 release in 2011. In the meantime, it’s simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme css file: copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors.