In this coding challenge, you need to build an Accordion component that auto expand/collapse after a certain period of time. ## Functional Requirements 1. The current active accordion should auto collapse after a certain amount of time. For example: `5 seconds`. 2. The next accordion item should auto expand. 3. The user can click on any accordion to open it. 4. The accordion should have a progress bar depicting the time left to complete. 5. There should be option to specify default expanded accordion item. 5. Try to use compound components syntax to implement the Accordion component. 6. Both progress bar and accordion height should be animated. ```html Is it Free? Yes, the platform and YouTube both are completely free! ``` ## Demo

## Mockups ![Mockup 1](https://ik.imagekit.io/devtoolstech/question-images/Accordion-V2/Screenshot_2023-04-23_at_5.01.39_PM_yHyzJZFVA.png?updatedAt=1682251804972) ![Mockup 2](https://ik.imagekit.io/devtoolstech/question-images/Accordion-V2/Screenshot_2023-04-23_at_5.02.08_PM_Y6rmTOFI3.png?updatedAt=1682251804909) ## Resources - Accordion Background Image: https://ik.imagekit.io/devtoolstech/question-images/Accordion-V2/accordion-v2-bg_xC-tJ2rig.svg?updatedAt=1682241938343 - Background Color: `#faf5f5d8` - Progress Bar Color: `#a29bfe` - Accordion Title Text Color: `#606d79` - Accordion Title Hover Color: `#04043a` ## Submission Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on [Twitter](https://twitter.com/devtoolstech) or [LinkedIn](https://in.linkedin.com/in/yomeshgupta).

Do you see value in our efforts?

How to build an Auto Collapsible Accordion? UI Coding Challenge | Frontend Interview Question | React.js | HTML | CSS

@Subhabrata Dutta