I am currently developing a sophisticated web application using Angular and TypeScript, and I have decided to incorporate accordions in some sections. The setup for these accordions involves TypeScript/Bootstrap as shown below:
<accordion>
<accordion-group heading="">
</accordion-group>
</accordion>
My question is, how can I add an up/down arrow to the accordion?
I attempted to utilize :after pseudo-classes and the content attribute with CSS on the rendered accordion classes, but it did not produce the desired outcome. I experimented with various classes without success. Is there a simpler method for achieving this?
This is the HTML snippet in question:
...
<accordion>
<accordion-group heading="{{'Model.EntityName' | translate}}" [isOpen]="true">
...
</accordion>
...
Here is the corresponding Sass code:
...
.panel-heading .accordion-toggle:after {
/* Symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* Necessary for glyphicon usage */
content: "\e114";
float: right;
color: grey;
}
...