Как использовать CSS, чтобы показать или скрыть ссылку переключения для свертывания панели

Question

У меня есть ссылка в заголовке панели, которая управляет свертыванием тела панели.У меня также есть переключатель ширины страницы для всех панелей.Поэтому я не могу использовать одну переменную, чтобы нацелить их все.У меня есть настройки CSS, чтобы скрыть соответствующую стрелку следующим образом ...

div[aria-expanded="false"] + .panel-heading .fa-angle-up {
    display: none;
}
div[aria-expanded="true"] + .panel-heading .fa-angle-down{
    display: none;
}

Это работает и правильно скрывает или показывает стрелку вверх или вниз в зависимости от того, свернуто ли тело панели.Тем не менее, он не работает при начальной загрузке страницы, только после нажатия переключателя он будет работать с этого момента.Почему это?

Вот HTML:

<div class="panel-heading">
    <a data-toggle="collapse" data-target="#myPanel">
        <i class="fas fa-angle-down"></i>
        <i class="fas fa-angle-up"></i>
    </a>
</div>
 <div id="myPanel" class="panel-body collapse in" aria-expanded="true">
    Test
 </div>