Добавьте стрелки вверх / вниз к аккордеону начальной загрузки с <accordion>

Question

Я программирую сложное веб-приложение с помощью angular / typcript и хочу использовать аккордеоны для нескольких вещей. Аккордеоны настроены с машинописью / начальной загрузкой так:

<accordion>

<accordion-group heading="">

</accordion-group>

</accordion>

Как мне добавить стрелку вверх / вниз к аккордеону?

Я пытался использовать: after псевдо-классы и атрибут content: css для визуализированных классов аккордеона, но это не сработало. Я пробовал много разных классов, но это не сработало. Есть ли простой способ сделать это?

это HTML:

...

<accordion>

 <accordion-group heading="{{'Model.EntityName' | translate}}" [isOpen]="true">

...

</accordion>

...

это нахальство:

...

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
  content: "\e114";
  float: right;
  color: grey;
}

...

Answer 1

Используйте этот код ниже и переключите «активный» класс:

.panel-heading .accordion-toggle:before {
        font-family: 'Glyphicons Halflings';
        content: "\e114";
        float: right;
        transition: all 0.5s;}
     .panel-heading .accordion-toggle.active:before {
         -webkit-transform: rotate(180deg);
         -moz-transform: rotate(180deg);
         transform: rotate(180deg);
     }