New Feature: Accordion - expanded state control

[ncoetzer]

Is your feature request related to a problem? Please describe. We've recently had a request from a client (Campbell's) to extend the accordion component with functionality to control its initial expanded state upon page load. By default, this feature is not built-in and would probably have to be added manually (which I'm almost sure has been done several times in the past). This seemed to be a handy feature that could benefit other projects/clients as well.

Describe the solution you'd like As a solution, we've implemented ToggleControls on two levels:

• A global toggle that controls the expanded state for all accordion items. When the global switch is enabled, all inner child items will inherit the setting

• Item-specific toggle that only controls its own expanded state. This option is only available if the global option has been disabled

As a result, not only would administrators have more control to customize the initial state of the accordion, but it would also improve the user experience in the editor at the same time.

[devinle]

Hey @ncoetzer thanks for opening this issue.

A few questions, or rather, discussion points:

As a user, when clicking to expand an accordion item, the accordion should ...

• collapse all other items except for the one clicked?
• OR keep all other expanded items opened?
• AND update the URL with a hash for direct linking? (<--not sure I would build this one out, since updating the URL might be making too many assumptions. But if there were an option or setting to do so, it might be a nice touch)

As an editor, when enabling the toggle "Expand by default" on an item, the accordion should ...

• toggle off the Expand by default setting on siblings (other accordion items)?
• OR allow for multiple expanded items opened?

The multiple vs singular items mentioned in the User and Editor criteria definitely relate. Oftentimes I'm on the fence with either only allowing a single accordion item to remain opened–but this can often force the collapse of other accordion items the user may still want opened.

Overall, I like your approach!

References:

• Multiselect: https://dequeuniversity.com/library/aria/tabless-multiselect-accordion
• Tabbed: https://dequeuniversity.com/library/aria/tabbed-accordion

[ncoetzer]

Thanks, @devinle really appreciate your feedback on this.

As a user, when clicking to expand an accordion item, the accordion should ...

The current behaviour of the accordion component is to keep all other expanded items open. I'm also with you on the fence here. The behaviour of only allowing a single accordion open at a time feels kind of forced. Perhaps this could be an additional option or setting e.g. "Tabbed" or "Multi-select", which would further allow the user to select the type of accordion they would want. However, this would interfere with the toggle approach, since more than one item could be expanded on load.

As an editor, when enabling the toggle "Expand by default" on an item, the accordion should ...

With my approach, the toggle for each individual item only becomes available and effective if the global option is disabled. The purpose of the global option is a quick way to force the behaviour on all items, regardless of their individual setting. Both the global and individual item options are by default set to false. Only if the global option is false/off, will the option become available on each individual item, otherwise, it inherits the global setting. I made a short screen recording to showcase what I've done on a past project for Campbell's Corporate, that might explain things a bit better 😉

https://user-images.githubusercontent.com/3490023/130070025-c66c8f32-f9f4-41be-9403-0c46f7763dcd.mp4

[ncoetzer]

We'll preferably introduce this new feature to the component here (CSS + JS) and the block library (InspectorControls) in tandem. This will ensure the new settings are also available to administrators in the admin.