Styles for the collapsed/expanded accordion [#2888729]

Hi,

I want to insert into the Panel title (for a) small signs that indicate whether the accordion is collapsed or expanded, but I could not find the appropriate selectors. When the accordion is loaded (collapsed) there is no css class. There is an attribute aria-expanded="true" (which is not true in that state). After expanding the accordion, there is still no css class, but after closing again there is a class="collapsed".

It would help, to have the appropriate classes for the expanded and collapsed state.

Greetings Julius

Comments

Comment #1

23 June 2017 at 09:58

julius95 created an issue. See original summary.

Comment #2

1 July 2017 at 15:15

thejimbirch committed 08c52de on 8.x-2.x

Issue #2888729 by thejimbirch: Changes initial aria-expanded to false...

Comment #3

thejimbirch CreditAttribution: thejimbirch commented 1 July 2017 at 15:20

Category:	Feature request	» Bug report
Status:	Active	» Fixed

Comment #4

thejimbirch CreditAttribution: thejimbirch commented 1 July 2017 at 15:20

Hi Julius,

I tried playing around with the classes, but could not get that to work without adding javascript.

Instead I simply changed the initial aria-expanded to false, which like you said it was any way. And now you can target the appropriate open/closed states with the following rules:

.paragraph--type--bp-accordion .panel-title > a[aria-expanded="true"] {
    color: red;
}

.paragraph--type--bp-accordion .panel-title > a[aria-expanded="false"] {
    color: purple;
}

This is committed to the dev branch.

Thanks for the issue!

Jim