Adding a new Accordion controller/component

[esmale]

I've been noodling over this idea for a little while now and finally decided to take a stab at it. I have a vague notion of trying to port over other Bootstrap components as well so that I can have that functionality available in Tailwind, but figured I should start with one and see how it goes.

Here's a demo of what it looks like at the moment:

accordion-demo.mov

[excid3]

@esmale What do you think about using this to coordinate <details> elements which already provide a portion of this functionality?

[esmale]

I think it's time for me to do some reading and experimenting!

[esmale]

@excid3 OK, after doing some reading and experimenting this is where I'm at.

The MDN docs for the details element says that it must contain a "summary" element, which is displayed by default in the closed state, and that the "contents of the details provide the accessible description of the summary." I know nothing prevents us from using details and summary elements differently, but I'll admit to feeling a little icky about it.

As for the use cases I've seen, the details element feels too strict in how it is rendered, or lacks flexibility to customize. The little arrow at sits in front of the summary visually. It's a ::marker pseudo-class element, which only supports a limited amount of customization. Of particular note is the apparent inability to change where it is rendered in relation to the summary text. (I could be wrong, hence use of the word "apparent".)

Part of the idea for this accordion controller was that I liked the idea of flexibility in how it all looks. With this controller you could use whatever image you wanted for the widget, you have control over where it renders (either before or after the "summary"), and can even control how it transitions between open and closed states.

I'd be happy to discuss further sometime if you have additional thoughts on any of this. I currently feel hesitant to try and override a bunch of what the details element is doing.