accordion markup missing flexibility

With the new accordion markup introduced by #2368, it is no longer possible to style the header based on its collapsed/expanded state.

Suppose one wants to add a chevron pointing right for closed and down for opened panes:

screen shot 2018-07-02 at 11 41 29

This would be appended to the h5 element like this:

h5 {
        &:after {
            font: normal normal normal 18px/1 FontAwesome;
            content: "\f054";
            margin-top: 4px;
            float: right;
            color: white;

With the new markup, there is no way to get the collapsed/expanded state at the level where style needs to be applied because it is only represented on the button child element. In the previous markup, there was a a element which had the expanded style.

In my view, ng-bootstrap should apply a class at the .card-header level to allow for such styling.

1 possible answer(s) on “accordion markup missing flexibility

  1. Trying to put a button or an anchor with a different action than toggle the content into the title(ngbPanelTitle) does not work in IE11 and firefox because of Content model for button: “Phrasing content, but there must be no interactive content descendant”. Any clue on how to make this work?