jquerycssjquery-mobilejquery-mobile-collapsible

Can't remove blue glow from jQuery mobile collapsible

Am having a lot of trouble making it so that a jQuery mobile collapsible does not display the blue glow box shadow when clicked. Given some HTML such as:

<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button id="a1">Go</button></div><br><br>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button id="a2">Go</button></div><br><br>
<br>

... some other answers I found seemed to suggest that the following CSS would help, but no dice:

.collapsibles {
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  outline: 0 !important;
}

Also tried applying this CSS to the h1s, applying it inline, and a few other things - no success so far.

JSFiddle demonstrating the problem: https://jsfiddle.net/pseudobison/xd6oejzz/2/

Solution

  • Kindly change the DOM selector that will apply those changes:

    /* This will removed the blue outline once expanded */
.collapsibles h1 a.ui-collapsible-heading-toggle {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

    Here is a sample JS Fiddle: https://jsfiddle.net/wvta0ezL/4/

    Hope this helps for your case.