Change collapsible list header colour when expanded [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 8 years ago.

Improve this question

I am using Jquery Mobile(1.4) for developing cross platform applications.

I want to be able to change the background color of the Collapsible list headers when they are expanded and set it back when collapsed.

Can anyone let me know how to change the background color of the "Collapsible list headers".

It would be better if we are able to do this through plain CSS.

Thank you in advance.

Answer 1

Change The Color As you wish

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

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

DEMO

Answer 2

HTML

 <div data-role="collapsible" id="clp" class="width70" data-mini="true">
 <h3 style="width: 120px">
                    Search
                </h3>

<div>
    <table data-role='table' id='tblSearch' data-mode='reflow' class='my-custom-breakpoint'>
        <thead id="tbl1">
            <tr>
                <th>HEADER1</th>
                <th>HEADER2</th>
                <th>HEADER3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="text" id="txtInsuredName" name="txtInsuredName" />
                </td>
                <td>
                    <input type="text" id="txtPolicy" name="txtPolicy" />
                </td>
                <td>
                    <input type="text" id="txtOT" name="txtOT" maxlength="10" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

JQUERY

  $('#clp').bind('expand', function () {
  $('#tbl1').addClass('greybackcolor');
  }).bind('collapse', function () {
  $('#tbl1').removeClass('greybackcolor');
 });

CSS

.width70 {
 width: 85%;
}
.greybackcolor {
 background: yellow;
}
@media (min-width: 400px) {
 /* Show the table header rows and set all cells to display: table-cell */
   .my-custom-breakpoint td, .my-custom-breakpoint th, .my-custom-breakpoint tbody th,     .my-custom-breakpoint tbody td, .my-custom-breakpoint thead td, .my-custom-breakpoint thead th {
    display: table-cell;
    margin: 0;
 }
 /* Hide the labels in each cell */
 .my-custom-breakpoint td .ui-table-cell-label, .my-custom-breakpoint th .ui-table-cell-label {
    display: none;
  }
}

Please find work demo : DEMO