Create an animated panel layout using Flexbox and React where each panel expands to reveal unique content when clicked.
Things to do
- Display multiple panels side by side using Flexbox.
- Horizontally arranged panels with background images and short text.
- When a panel is clicked:
- It should expand with a smooth transition.
- All other panels should collapse.
- It should display 2 hidden text
- Each panel contains an image as background and 2–3 lines of text.
- Use flexData prop ,which is an array of objects
{
image: "image_url",
text: ["Hidden line 1", "Visible line", "Hidden line 2"]
}
- Only one panel can be open at a time.
- Use CSS transitions for animation.
Example UI:
A horizontal strip of image cards that expand when clicked to reveal additional text.
Testing Instructions
Please use the following data-testid attributes in your React component:
- data-testid={panel-${index}} → for the Each Panel
