Add up/down arrows to the bootstrap accordion with

Question

I`m programming a complex web app with angular /typescript, and I want to use accordions for a few things. The accordions are set up with typescript/bootstrap like this:

<accordion>

<accordion-group heading="">

</accordion-group>

</accordion>

How would I add an up/down arrow to the accordion?

I tried using :after pseudo classes and the content: attribute with css for the rendered accordion classes, but that didnt work. I tried a lot of different classes to do that with, but it didnt work. Is there an easy way to do that?

this is the HTML:

...

<accordion>

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

...

</accordion>

...

this is the sass:

...

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

...

Which one is the name of the node module you are using for the accordion — yunzen, Apr 18 '19 at 10:58
Can you provide workable stackblitz code that will help us to find solution for you — Sethuraman, Apr 18 '19 at 11:01
you can check this my previous post check if this solves your problem , I think what ever css your providing its not accepted. https://stackoverflow.com/questions/54214998/disable-scrolling-bar-in-mat-menu/54215547#54215547 — Sethuraman, Apr 18 '19 at 11:03

score 0 · Accepted Answer · answered Apr 18 '19 at 11:18

Use this below code and toggle 'active' class:

.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);
     }

Add up/down arrows to the bootstrap accordion with

1 Answers1