Bootstrap 4 set colour of headers of open panels

Hagelslag 0
Viewed 34

I'm using HTML templates, which are based on Bootstrap 4.3.1. With the help of the Stack Overflow community, I managed to change the default behaviour of the accordions in these templates. Now only one panel can be opened at a time (i.e. as soon as a new panel is opened, the previously opened panel will automatically close). I also managed to change the background colour of the active panel by invoking aria attributes as follows:

.accordion .card .card-header button[aria-expanded="true"] {
  background-color:#0965AC;
  color: #ffffff;
}

A working example can be found on this CodePen (the aforementioned code can be found at the bottom of the CSS:

When I open a specific panel on page load using class="collapse show", the card-header of the open panel doesn't show the blue background. After closing and opening this panel again, the blue background shows.

Any suggestions on how I can, on page load, let the open panel also show the blue background?

I tried as follows, but no no avail:

.accordion .card .card-header button[class="collapse show"] {
  background-color:#0965AC;
  color: #ffffff;
}
bootstrap-accordion bootstrap-4 css html
1 Answers

According to your CSS you can change the aria-expanded="false" in your JavaScript to aria-expanded="true" depending on the element you want to be expanded. Replace the $(value).find(...) with the following to expand the first element on load:

if (num == 1) {
     $(value).find(".card-header > .card-title").wrapInner( "<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"true\"></button>");
} else {
     $(value).find(".card-header > .card-title").wrapInner( "<button  class=\"btn btn-link\" type=\"button\" data-toggle=\"collapse\" aria-expanded=\"false\"></button>");
}

There are two reasons why .accordion .card .card-header button[class="collapse show"] is not working. First of all, you would write .accordion .card .card-header button.collapse.show defining that the button element should have classes collapse and show in order for the button to get the CSS rules defined to this selector. Though, the button does not get these classes when it is clicked. You would need to toggle the show class on the button in order to see the CSS.

Tom Groot0
Related