0
Hours
0
Minutes
0
Seconds
You need Login/Signup to run/submit the code.

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

@Devtools Tech
1175

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

Mockup 1

Mockup 2

Resources

Submission

Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on Twitter or LinkedIn.