Accordion: add example which includes an extra button

[jnurthen]

the accordion pattern states

In some accordions, there are additional elements that are always visible adjacent to the accordion header. For instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section. And, in some cases, a snippet of the hidden content may also be visually persistent.

There should be an example explaining where in the DOM structure this content should be placed. My assumption is that it should be between the header/expand button and the accordion content but outside the header element.

[carmacleod]

Good idea for an example. It should also allow all panels to be closed or open, i.e. the current example enforces precisely one panel at a time (which has a bit of an awkward feel, particularly with that disabled button in there), so need to show an alternative to that.

Regarding where to put the overflow menubutton, I wonder if (since HTML headings allow button content and since heading role allows name from content or author), it could conceivably go inside the header as a sibling of the expand/collapse button? (of course, we would need to try both ways - button-after-heading and button-in-heading - with screen readers to see which one has better support and make sure the buttons don't get "flattened" into the heading's name. May need to provide a name from author). Anyhow, just a thought.

[carmacleod]

Ok, so allowing all panels to be closed or open (and even providing a UI method to expand all/collapse all) has already been asked for multiple times: #616 and #304 (comment).
In fact, apparently the current example even has flags that can be modified by editing the javascript (allowToggle and allowMultiple), which is totally un-obvious and needs to be surfaced in the example UI.

Nonetheless, I feel that any new accordion example needs to allow all panels to open and close by default (no flags).