I’m designing expandable sections (Section Level A). Each section is topped with a heading (Subheading A) and nested within that is a Button component, which the user clicks to expand and close the sections. Here is how it is structured:
When a user clicks the Button, the arrow icon is supposed to changed based on the state of the section (down arrow for expanded, right arrow for closed). But the icon does not update:
One known workaround is to rename one of the Buttons to something else, like this:
…but if I do this, the other sections with different names get overridden. Notice how Following changes to My collections when collapsed:
Another workaround is to Detach the Button component. However, I lose all the Button component’s hover and active states.