Implement a custom accordion component

Build a reusable accordion component in JavaScript that can show and hide sections of content when their headers are clicked.

The accordion should:

• Allow you to define a list of items, where each item has a header (title) and associated content.
• Toggle the visibility of an item’s content when its header is activated.
• Clearly indicate which items are expanded vs. collapsed (for example, via CSS classes or ARIA attributes).
• Support configuring whether multiple items can be open at the same time, or only one item is open (and expanding a new one collapses the previously open item).
• Expose a simple, framework-agnostic API (for example, a function that receives a root DOM element and data, or a small class that wires up existing markup).

Acceptance criteria

• Interaction: Clicking on an item header expands its content; clicking again collapses it.
• Initial state: It is possible to render the accordion with all items collapsed by default; optionally, one or more items may start expanded.
• State exclusivity: There is a way to configure the accordion to behave in “single-open” mode (only one item open) or “multi-open” mode (multiple items can be open).
• Visual feedback: The open/closed state of each item is visually distinguishable (e.g. via different styles or icons).
• Accessibility considerations: The solution makes it possible to add semantic markup and attributes (for example, button elements for triggers, aria-expanded, etc.), even if the exact HTML structure is left to the implementer.