CODEWITHSUNDEEP
jquerycssjquery-mobile
Anto
Anto

Reputation: 4305

Changing style in collapsible elements in JQuery Mobile

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?

Upvotes: 1

Views: 8944

Answers (1)

Gajotres
Gajotres

Reputation: 57309

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;
}

Upvotes: 4

Related Questions