1

I would like to change the style of a collapsible element in JQuery Mobile: the element should not have any border and be completely white. I have tried the following:

 <div class="ui-block-a" data-role="collapsible"  data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="width: 74%; margin-left: 9px; border-width: 0px; background-color:white">
                <h3>Name</h3>
                <p>This is a mock.</p>
            </div>

However it seems that certain CSS don't work. Does anyone know if it's possible?

1
  • Values are separated from keys by colon :, not equal sign =
    – Ilia G
    Mar 11, 2013 at 15:54

1 Answer 1

4

Here's a working example: http://jsfiddle.net/Gajotres/GNAXT/

It must be done through css, also collapsible element must have its own id if you don't want to change every element that uses collapsible css classes.

!important is important because it is used to override original properties.

#custom-collapsible {
    width: 74% !important; 
    margin-left: 9px !important; 
    border-width: 0px !important; 
    background-color: white  !important;
}

#custom-collapsible h3 a {
    border-width: 0px !important; 
    background: white  !important;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.