Изменить цвет фона кнопки, когда открыт элемент Bootstrap 4

Question

Можно ли изменить цвет фона кнопки, которая открывает коллапс карты? Моя цель состоит в том, чтобы выделить кнопку, которая соответствует активной цели данных.

В качестве примера, вот кнопка, которую я хочу выделить, но только если ее цель данных (div id январь) открыта. Если цель данных (div id февраль) открыта, кнопка января больше не подсвечивается, а кнопка февраля подсвечивается. Если объекты данных не открыты, кнопки не подсвечиваются.

    <!-- January -->

        <div class="card col-sm-2">
            <button class="btn btn-link btn-block" type="button" data-toggle="collapse" 
             data-target="#january" aria-expanded="true" aria-controls="january">
                <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
                  January
            </button>
        </div>

Answer 1

data-target представляет и элемент HTML с id="january", который отсутствует.

Но при условии, что он у вас есть в другом месте, при нажатии кнопки происходит 2 вещи.

1. #january после завершения анимации будет иметь класс collapse
2. кнопка, после завершения анимации будет иметь класс collapsed, который можно стилизовать

Здесь яЯ использую заголовок карты в качестве «кнопки» свёртывания и стилизации с помощью css

РЕДАКТИРОВАТЬ: модифицированный фрагмент для комментария OP

#card1 .card-header {
  transition: background-color 0.5s ease;
}

#card1 .collapsed {
  background-color: red !important;
}

#card2 .card-header {
  background-color: red;
  transition: background-color 0.5s ease;
}

#card2 .card-header.collapsed {
  background-color: rgba(0, 0, 0, 0.03)
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>


<div id="card1" class="card">
  <div class="card-header" data-toggle="collapse" data-target="#january">
    Featured
  </div>
  <div id="january" class="card-body collapse show">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div id="card2" class="card">
  <div class="card-header" data-toggle="collapse" data-target="#february">
    Featured
  </div>
  <div id="february" class="card-body collapse show">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>