Add setting to have Accordion open initially

[nicholasio]

Is your feature request related to a problem? Please describe. In several projects I have come across designs that demand individual Accordions to be open by default. (Normally the first of a group.)

Describe the solution you'd like There are two ways I could thing of: 1: Make the component not handle all the accordions on a page at once, but initiate it for individual items. Authors would then have to loop over the accordion element themselves but it would allow you to actually return the individual instance of the accordion that exposes the methods to be used in js.

const elements = document.querySelectorAll( '.accordion' );

elements.map( element =>  new Accordion( element, {...} ) );

2: Return the individual instances of the accordion in addition to the $accordions elements. That way you could call the open method on the first element returned.

Describe alternatives you've considered A way this can be one currently is by calling the .call() method on the button.

Original Ticket: https://github.com/10up/component-accordion/issues/38

[nicholasio]

I like the idea of passing an element instead of a selector to Accordion and also make Accordion handle only one element at a time instead of a collection of accordions.

We could change Accordion so that it either receives a selector or an element but it would always run querySelector instead of querySelectorAll.

Then we could expose an AccordionFactory class that would instantiate multiple accordions with querySelectorAll.

Currently,, all of the components are a single class but these classes shares a lot of responsibility and at the same time it doesn't properly represent a single component, but rather a potential collection of components.