jQM 1.4 collapsible color options

by Kvark

HTML

<div data-role="page" id="pageone">
    <div data-role="header">
         <h1>Theming Collapsible Lists</h1>

    </div>
    <div data-role="main" class="ui-content">
        <div data-role="collapsible" class="acol">
             <h4>A <span class="ui-li-count redCount" id="red_count">0</span></h4>

            <ul data-role="listview">
                <li><a href="#">Item 1</a>
                </li>
                <li><a href="#">Item 2</a>
                </li>
            </ul>
        </div>
        <div data-role="collapsible" class="bcol">
             <h4>B<span class="ui-li-count greenCount" id="green_count">0</span></h4>

            <ul data-role="listview">
                <li><a href="#">Item 1</a>
                </li>
                <li><a href="#">Item 2</a>
                </li>
            </ul>
        </div>
    </div>
    <div data-role="footer">
         <h1>Insert Footer Text Here</h1>

    </div>
</div>

CSS

.acol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
       background:red !important;
}
.acol .ui-collapsible-heading-toggle {
       background:yellow !important;
}
.bcol .ui-collapsible-heading-collapsed > .ui-collapsible-heading-toggle {
       background:green !important;
}
.bcol .ui-collapsible-heading-toggle {
       background:orange !important;
}

.redCount {
    color: red;
    background-color: #333;
    text-shadow: none;
}
.greenCount {
    color: green;
    background-color: #333;
    text-shadow: none;    
}