Build an Accordion component that displays a list of vertically stacked sections that each contain a title and content snippet. Some HTML is provided for you as example contents along with a chevron icon.

Requirements

• By default, all sections are collapsed and are hidden from view.
• Clicking on a section title toggles the contents.
  • If the section is collapsed, the section will be expanded and the contents will be displayed.
  • If the section is expanded, the section will be collapsed and the contents will be hidden.
• The sections are independent of each other.

Example

Try out an example of an accordion component.

Notes

• The focus of this question is on functionality, not the styling. Do not spend too much time writing custom CSS.
• You may modify the markup (e.g. adding **id**s, data attributes, replacing some tags, etc) and use client-side rendering instead.
• You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).

Solution

Solution

Implementing a basic (not fully accessible) Accordion component using UI frameworks is quite simple due to the fact that only one state value is needed, the expanded/collapsed states of each section. UI frameworks also help to keep the state and the UI in sync, which we'd have to implement on our own if we were to use in Vanilla JavaScript.

Props (API Design)

Part of the complexity of building a component is designing the API for it. In the case of a component-based framework, this would be the properties of the component. At the bare minimum, we will need the following props/attributes:

• sections: A list of item objects. Each item is an object with the fields:
  • value: A unique identifier for the accordion item.
  • title: The text label to show in the accordion title.
  • contents: The contents to show when the section is expanded.

State

We can use ES6 Set to keep track of the sections which are expanded. When the section title is clicked, check if the section's value is within the set. The value will be removed from the set if it's inside and added it into the set otherwise.