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
In this coding challenge, you need to build an Accordion component that auto expand/collapse after a certain period of time.
Functional Requirements
- The current active accordion should auto collapse after a certain amount of time. For example:
5 seconds
. - The next accordion item should auto expand.
- The user can click on any accordion to open it.
- The accordion should have a progress bar depicting the time left to complete.
- There should be option to specify default expanded accordion item.
- Try to use compound components syntax to implement the Accordion component.
- 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.
React
React
HTML/CSS/JavaScript