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

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.
6. Try to use compound components syntax to implement the Accordion component.
7. Both progress bar and accordion height should be animated.

<Accordion defaultActive="1" {...props}>
  <Accordion.Item id="1">
    <Accordion.Toggle>Is it Free?</Accordion.Toggle>
    <Accordion.Panel>
      Yes, the platform and YouTube both are completely free!
    </Accordion.Panel>
  </Accordion.Item>
</Accordion>

Demo

Mockups

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 or LinkedIn.