Add accordion example that allows all panels to be collapsed

[DavidMacDonald]

I like the accordion example but there is no way to close all.

[ZoeBijl]

Yes, yes, yes! You should totally be able to close all panels, it’s so annoying that you can’t.

[pauljadam]

what about an example where the accordion can close completely? I keep clicking to close the last open panel but it won't.

[DavidMacDonald]

It should have a way to open all panels too... I think most users who are blind would like to be able to open the whole thing from the beginning.

[ZoeBijl]

@DavidMacDonald I think that is what the disclosure design pattern is for. That does exactly what you describe.

[jnurthen]

Accordions come in all sorts of types.

• Some allow all panels to be collapsed
• Some will collapse a previous panel when another is opened
• Some allow multiple panels to be expanded.

I don't want to mandate one pattern over another as in different circumstances different ones are appropriate.

Bryan's JS has a simple way to modify these - look in setup.js

// Allow for each toggle to both open and close individually
var allowToggle = false,
// Allow for multiple accordion sections to be expanded at the same time
allowMultiple = false;

[mcking65]

As @jnurthen pointed out, the code for the accordion example is configurable. That does mean that it would be a simple change for us to create a different behavior on the current example page. Alternatively, we could easily have two configurations.

Showing only one configuration implies a preference.

I have read some research that suggests that forcing one panel to always be open has negative impact on UX ... I'll see if I can dig that up. That would be another reason for adding a page with an alternative configuration.

If we do add an example where all panels can be collapsed, then we may want to consider adding a button for expand/collapse all.

[DavidMacDonald]

@mcking65

If we do add an example where all panels can be collapsed, then we may want to consider adding a button for expand/collapse all.

Yes, by all means... I think the accordion should have expand all and collapse all... buttons (or toggle)